показать / скрыть кнопки при наведении мыши - PullRequest
Новая
       8

показать / скрыть кнопки при наведении мыши

1 голос
/ 30 ноября 2011

Я столкнулся с проблемой здесь.У меня есть div # top-products, который содержит слайд-шоу.За пределами этого div у меня есть два идентификатора: #prevBtn и #nextBtn.Эти кнопки являются элементами управления для слайд-шоу.Для них установлено отображение: нет, и они размещаются внутри div # top-products с использованием абсолютного позиционирования.

<div id="top-products"></div>
<div id="prevBtn"></div>
<div id="nextBtn"></div>

Я хочу, чтобы кнопки отображались, как только моя мышь перемещалась по div # top-products, и исчезали, когда моя мышь выходила за пределы div.

У меня появились кнопки, как только моя мышь пересекает область # top-products 

$("#top-products").mouseover(function() {
    $("#prevBtn, #nextBtn").show();
  });
  $("#top-products").mouseout(function() {
    $("#prevBtn, #nextBtn").hide();
  });

Проблема в том, что, как только моя мышь переходит любую из кнопокони начинают включаться и выключаться неоднократно.Я вижу это на firebug, переключающемся между display none и display display.

Любые предложения?

Вот как он ведет себя: http://neolamanite.com/sites/all/themes/test/slider/home-page.html

Ответы [ 2 ]

3 голосов
/ 30 ноября 2011

Похоже, это потому, что вы больше не зависаете над #top-products (вы зависаете над кнопкой), поэтому он прячется (а затем снова мигает, потому что вы снова наводите курсор на него после нажатия кнопки).было скрыто)

Если вы можете редактировать свой HTML, оптимальным решением было бы переместить кнопки внутри #top-products, расположить их по мере необходимости и слегка изменить ваш JavaScript, чтобы использовать mouseenterи mouseleave события вместо: 

<div id="top-products">top products
    <div id="prevBtn">Prev</div>
    <div id="nextBtn">Next</div>
</div>

$("#top-products").mouseenter(function() {
    $("#prevBtn, #nextBtn").show();
});
$("#top-products").mouseleave(function() {
    $("#prevBtn, #nextBtn").hide();
});
3 голосов
/ 30 ноября 2011

Трудно сказать, почему именно это происходит, так как мне нужно было бы увидеть код, который воспроизводит слайд-шоу.

Есть трюк, который иногда делается с меню при наведении, которое намеренно имеет небольшой интервал междукнопки, которые открыты, когда мышь зависает над ними, но не хотят терять их, когда мышь перемещается между ними.Хитрость заключается в том, чтобы установить таймер с небольшим интервалом для события mouseout, и только после этого он должен скрывать div.

Примерно так: 

$("#top-products").mouseenter(function(){
    clearTimeout($(this).data('timeoutId'));
    $("#prevBtn, #nextBtn").show();
}).mouseleave(function(){
    var someelement = this;
    var timeoutId = setTimeout(function(){ $(someelement).find("#prevbtn, #nextbtn").fadeOut("slow");}, 650);
    $(someelement).data('timeoutId', timeoutId); //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
});
...