Вопрос по javascript, jquery, hover – Наведите указатель мыши на изображение, чтобы отобразить кнопки и не вызывать его при наведении курсора на реальные кнопки.

8

Я пытаюсь заставить кнопки появляться при наведении на изображение. Следующие работы:


    jQuery('.show-image').mouseenter(function() {
 jQuery('.the-buttons').animate({
  opacity: 1
 }, 1500);
}).mouseout(function() {
 jQuery('.the-buttons').animate({
  opacity: 0
 }, 1500); 
});

Однако при переходе от изображения к кнопке (которая находится над изображением) срабатывает указатель мыши / указатель мыши, поэтому кнопки постепенно исчезают, а затем возвращаются обратно (кнопки имеют тот же класс, что и изображение, в противном случае они просто остаются блеклыми. из). Как я могу предотвратить это? Я также попробовал приведенный выше код с помощью наведения jQuery; те же результаты. Вот деталь изображения, показывающего кнопку с непрозрачностью 1 (потому что я поверх изображения):

http://i.stack.imgur.com/egeVq.png

Спасибо заранее за любые предложения.

Ваш Ответ

2   ответа
8

Самое простое решение - поместить обоих в одного и того же родителя.div и дать родителюdiv show-image учебный класс.

Я люблю использовать.hover() чтобы сохранить несколько нажатий клавиш. (alll hover делает это реализовать.mouseenter() а также.mouseleave(), но вы не должны их печатать)

Кроме того, очень важно исчезать$(this).find(".the-buttons") так что вы меняете только кнопку в зависании надdiv в противном случае вы бы изменили все.the-buttons на всей странице!.find() просто ищет потомков.

В заключение,.animate() будет работать, но почему бы просто не использовать.fadeIn() а также.fadeOut()?

JS:

jQuery(function() {                                              // <== Doc ready

    jQuery(".the-buttons").hide();                  // Initially hide all buttons

    jQuery('.show-image').hover(function() {
         jQuery(this).find('.the-buttons').fadeIn(1500);         // use .find() !
    }, function() {
        jQuery(this).find('.the-buttons').fadeOut(1500);         // use .find() !
    });
});
Попробуйте это с этим jsFiddle

HTML: - как-то так

<div class="show-image">
    <img src="http://i.stack.imgur.com/egeVq.png" />
    <input class="the-buttons" type="button" value=" Click " />
</div>​

CSS: - Как-то так. Ваш, скорее всего, будет другим.

div {
    position: relative;
    float:left;
    margin:5px;}
div input {
    position:absolute;
    top:0;
    left:0; }​
3

Поместите изображение и кнопку в один и тот же div, затем поместите события mouseover / mouseout на div. Если ваша мышь находится над кнопкой или над изображением, она все равно будет над элементом div.

Также я не уверен, еслиmouseenter(...).mouseout(...) буду работать. Я всегда используюhover(..., ...)

[ .hover() ] (api.jquery.com/hover) это просто краткая реализация.mouseenter() а также.mouseleave() Peter Ajtai
Да, я не видел, чтобы «mouseenter» часто использовался, но я видел, как «mouseover» часто используется. coder_tim

Похожие вопросы