0

Двигая мышкой по тексту внутри элемента (текст помещен в отдельный 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>

1 ответ 1

1

Не смотря на странное поведение события, дочерние элементы значит стоит исключить из обработки:

$('.square').mouseenter(function (e){
   if(!$(e.target).is('.text')){
      // тут код, который должен быть выполнен единожды
   }
}

Решение проблемы:

$('.text').mouseenter(function (e){
    color = colorGenerator();
    $(this).parent().css('backgroundColor', color);
    $(this).empty();
    $(this).text(color);
});
3
  • Эта строчка кода решает мою проблему, но создает новую! Цвет определяется только один раз и при повторном наведении не меняется.
    – Naddyson
    Commented 4 авг. 2016 в 18:16
  • @Naddyson, срабатывало один раз, потому что текст перекрывает квадрат полностью. Но основная ошибка состоит в том, что текстовый элемент удаляется и появляется вновь при наведении. В какую-то долю микросекунды такая смена структуры доставляет неудобства. Курсор в это время "соскакивает" на отца, а потом обратно на текст. И так до бесконечности. Обновил ответ :) Commented 5 авг. 2016 в 10:01
  • Ваш код почему-то не работал. Я просто поменял в своем коде remove() на empty(). Вы мне все подробно и понятно объяснили, спасибо большое :)
    – Naddyson
    Commented 5 авг. 2016 в 12:36

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.