Двигая мышкой по тексту внутри элемента (текст помещен в отдельный div) срабатывает с очень быстрым повторением mouseenter, а нужно, чтобы срабатывал только один раз, при входе в блок square без реакции на дочерние элемент. JavaScript-код:
$('.square').mouseenter(function (){
var color = colorGenerator();
(this).style.backgroundColor=color;
$(this).children('.text').remove();
$('<div>').addClass('text').appendTo(this).text(color);
CSS-код:
.square {
width: 100px; height: 100px;
float:left;
background-color: white;
color:white;
text-align: center;
font-size:20px;
display: table;
}
.text{
text-align: center;
display: table-cell;
vertical-align: middle;
}
.square:hover {
box-shadow: 0px 0px 20px #F0FFF0 inset;
text-align: center;
vertical-align: middle;
color:white;
}
HTML-код:
<div class="container">
<div class="title-text">RANDOM COLOR</div>
<div class="workspace">
<div class="square">
<div class="text"></div>
</div>
</div>
</div>