Как обнаружить mouseleave() сразу на двух элементах?

ответ может быть в ванили js или jQuery. Я хочу скрыть div с идентификатором "myDiv", если пользователь больше не зависает над ссылкой с идентификатором" myLink "или промежутком с идентификатором"mySpan". Если у пользователя есть мышь над любым элементом, " myDiv "все равно будет отображаться, но второй пользователь не будет наведен ни на один из двух (не имеет значения, какой элемент пользовательская мышь оставляет первым)" myDiv " исчезнет с лица существования.

другими словами, это то, как я обнаруживаю мышь оставить на одном элементе:

$('#someElement').mouseleave(function() {

   // do something

});

но как сказать (таким образом, что на самом деле будет работать):

$('#someElement').mouseleave() || $('#someOtherElement').mouseleave()) {

   // do something

});

Как обнаружить это?

10
javascript jquery

5 ответов

можно использовать множественный селектор:

$("#someElement, #someOtherElement").mouseleave(function() {
   // Do something.
});
10

что-то вроде этого должно работать:

var count = 0;
$('#myLink, #mySpan').mouseenter(function(){
    count++;
    $('#myDiv').show();
}).mouseleave(function(){
    count--;
    if (!count) {
        $('#myDiv').hide();
    }
});

jsfiddle

14

хотя ответ от lonesomeday совершенно действителен, я изменил свой html, чтобы иметь оба элемента в одном контейнере. Я изначально хотел избежать этого, поэтому мне пришлось сделать больше рефакторинга для моих клиентов в других шаблонах html, но я думаю, что это окупится в долгосрочной перспективе.

<div id="my-container">
 <div class="elem1">Foo</div>
 <div class="elem2">Bar</div>
</div>

$('#my-container').mouseleave(function() { console.log("left"); });
2

Я думаю, это ваше решение!!!

$(document).ready(function() {
    var someOtherElement = "";
    $("#someElement").hover(function(){
        var someOtherElement = $(this).attr("href");
        $(someOtherElement).show();
    });
    $("#someElement").mouseleave(function(){
        var someOtherElement= $(this).attr("href");
        $(someOtherElement).mouseenter(function(){
        $(someOtherElement).show();
        });
        $(someOtherElement).mouseleave(function(){
        $(someOtherElement).hide();
        });

    });
});

----
html
----
<div id="someElement">
                <ul>
                  <li><a href="#tab1">element1</a></li>
                  <li><a href="#tab2">element2</a></li>
        </ul>       
</div>

<div id="tab1" style="display: none"> TAB1 </div>
<div id="tab2" style="display: none"> TAB1 </div>
1

вы можете прекрасно использовать setTimeout() дать mouseleave() функция некоторого "допуска", то есть, если вы покидаете divs, но повторно вводите один из них в течение заданного периода времени, он не вызывает .

вот код (добавлен к ответу lonesomeday):

var count = 0;
var tolerance = 500;
$('#d1, #d2').mouseenter(function(){
    count++;
    $('#d3').show();
}).mouseleave(function(){
    count--;
    setTimeout(function () {
        if (!count) {
            $('#d3').hide();
        }
    }, tolerance);
});

http://jsfiddle.net/pFTfm/195/

0