Событие мыши в jquery .hover () срабатывает только при касании границы div - PullRequest
Новая
       11

Событие мыши в jquery .hover () срабатывает только при касании границы div

1 голос
/ 06 апреля 2011

Я реализую зависшую панель инструментов в div. Чаще всего не зависает (событие мыши).

Я могу надежно заставить его срабатывать, когда я удерживаю мышь на границе 4px накрытого div, но если я быстро двигаю мышь и останавливаюсь в середине div, ничего не происходит.

Вот мой jquery: 

$(".love").hover(function(e){
    showLoveActions(e);
},function(e){
    hideLoveActions();  
});

HTML выглядит так: 

<div id="lovespace">
<div class="love" style="width: 192px; height: 192px; position: absolute; left: 320px; top: 0px;">
    <span class="loveactions" id="0000000036">
       <ul>
       <li><a href="#" class="loveaction_love loveaction_grey">&hearts;</a></li>
           <li><a href="#" class="loveaction_addimpression">:D</a></li>
           <li><a href="#" class="loveaction_addtolist">&#10010;</a></li>
        </ul>
    </span>             
   <div class="loveimage" style="background-image:url(DataStorage/loveImages/{D7D4FB9D-5DBC-170A-1841-75FEF988881B}.jpg);width:192px;height:192px;">
       <div class="topBar">
          <div class="userName" style="color:#B3FFD6">I</div>
          <div class="loveHeart" loveid="0000000036">&hearts;</div> 
          <div class="numbers">
             <div class="circleLoves">1</div>
          </div>
       </div>
       <div class="bottomBar">
           <div class="loveName">Floating Weeds</div>
    </div>
</div>
</div>

Диапазон .loveactions - это панель инструментов, которая по умолчанию установлена ​​в положение: абсолютное, дисплей: нет. Когда мы наводим курсор на .love div, он вызывает метод showLoveActions (e), который центрирует диапазон и меняет отображение на блок.

Я исключил метод showLoveActions, поскольку при замене на предупреждение я сталкиваюсь с тем же поведением.

Я подозреваю, что событие mouseenter вызывается только границей 4px, и поэтому, если я перемещаю мышь слишком быстро, она не обнаруживается. Я озадачен, почему остальная часть div не регистрирует событие.

Еще одна странность состоит в том, что когда мышиный центр срабатывает и появляется панель инструментов, hideLoveActions всегда вызывается, когда мышь покидает div.

Я должен добавить, что на странице есть много div .love, и они абсолютно позиционируются через кладку jquery.

.love div содержится внутри div с id из lovespace Вот css для различных элементов: 

#lovespace div.love
{
    display:inline;
    z-index:1;
    border-color: rgba(204, 70, 70, 1);
    border-width: 4px;
    margin:12px;
    border-style: solid;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    -opera-border-radius:6px;
    -khtml-border-radius:6px;
    border-radius:6px;
    -moz-box-shadow: rgba(0,0,0,0.5) 1px 1px 3px;
    -webkit-box-shadow:rgba(0,0,0,0.5) 1px 1px 3px;
    -opera-box-shadow: rgba(0,0,0,0.5) 1px 1px 3px;
    -khtml-box-shadow:rgba(0,0,0,0.5) 1px 1px 3px;
    box-shadow: rgba(0,0,0,0.5) 1px 1px 3px;


}

#lovespace div.love div div.topBar
{
     background-color: rgba(0,0,0,.5);
     color:white;
     width:100%;
     line-break: 26px;
}
#lovespace div.love div.loveimage
{
    position:relative;
}
#lovespace div.love div div.topBar div.userName
{
    display: inline-block;
    margin-left: 4px;
    padding: 4px;
    text-shadow: 1px 1px 3px black;
    font-weight: bold;
    font-size: 22px;
}
#lovespace div.love div div.topBar div.loveHeart
{
    text-shadow: 1px 1px 3px black;
    color: #cc2424;
    font-size:26px;
    display: inline-block;
    margin-left:2px;
    padding:2px;

}
#lovespace div.love div div.topBar div.loveHeart_notLoved
{
    color:rgba(170,160,160,1);
    text-shadow: 1px 1px 3px black;
}
#lovespace div.love div div.topBar div.numbers
{
    float:right;
    margin-top:4px;
    margin-right:4px;
    line-height:26px;
}

#lovespace div.love div div.topBar div.numbers div.circleLoves
{
    font-weight: bold;
    color: white;
    background-color: #2ab239;
    display: inline-block;
    padding:4px;
    padding-top:2px;
    padding-bottom: 2px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    -opera-border-radius:6px;
    -khtml-border-radius:6px;
    border-radius:6px;
    font-size:14px;

}

#lovespace div.love div div.bottomBar
{
     position: absolute;
     background-color: rgba(0,0,0,0.5);
     color:white;
     bottom: 0px;
     left: 0px;
     width: 100%;
}
#lovespace div.love div div.bottomBar div.loveName
{
    padding:4px;
    margin-left:4px;
    float:left;
    text-shadow: 1px 1px 2px black;
    font-weight: bold;
    font-size: 22px;
}

1 Ответ

2 голосов
/ 07 апреля 2011

Ничего не предполагай ... Я нашел ошибку. И оно заключалось в функции, в которой я был так уверен, когда писал.

Помните это? 

   showLoveActions(e)

В этой функции я предполагал, что e.target всегда будет классом .love. 

function showLoveActions(e)
{
    var love = $(e.target)
var loveactions = love.children(".loveactions");
//alert(loveactions);
loveactions.fadeIn(100);//.css("display", "block");
var loveactionTop = ((love.height()-loveactions.height())/2)-8;
var loveactionLeft = ((love.width()-loveactions.width())/2)-8;
loveactions.css("top",loveactionTop);
loveactions.css("left",loveactionLeft);

}

Не так. Иногда целью было: 

<div class="loveName">Floating Weeds</div>

В других случаях целью была: 

<div class="userName" style="color:#B3FFD6">I</div>

Я добавил этот тест в начало метода: 

    var love;
if(! $(e.target).hasClass("love"))
{
    love = $(e.target).parents(".love");

}
else
{
    love = $(e.target);

}

Извлеченный урок: когда .hover работает со сложным div, e.target может вернуть элемент, которого вы не ожидали.

...