JQuery наведите курсор на изображение не работает

Я хочу изменить opacity главного image, когда мышь hover на right изображение проста:JQuery наведите курсор на изображение не работает

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <style> 
     body { 
      margin: 0; 
      padding: 0; 
     } 

     #main { 
      opacity: 1; 
     } 

     #right { 
      position: absolute; 
      margin-left: -310px; 
      margin-top: 320px; 
      visibility: hidden; 
     } 

     #center { 
      position: absolute; 
      margin-left: -655px; 
      margin-top: 20px; 
      visibility: hidden; 
     } 
    </style> 
    <script> 
     $(document).ready(function() { 
      $("#right").hover(function() { 
       $("main").css("opacity","0.4"); 
       $("right").css("visibility","visible"); 
      }, function() { 
       $("main").css("opacity","1"); 
       $("right").css("visibility","hidden"); 
      }); 
     }); 
    </script> 
</head> 
<body> 
<img id="main" src="img/1477253.jpg"> 
<img id="right" src="img/Untitled-1.png"> 
<img id="center" src="img/Untitled-2.png"> 
</body> 
</html>

но когда mouse попасть на скрытую right образа ничего не случится , что здесь пропало?

источник

2015-02-17 Abanoub

Почему бы не использовать '#right: hover' правило CSS? –

post jsfiddle pls. –

Вы не можете навешивать '# right', потому что он находится вне окна просмотра, и он также скрыт. – mkutyba

Я решил его, вместо того, чтобы использовать visibility: hidden; я opacity: 0;, и таким образом он работал отлично, спасибо за комментарии, ребята :)

источник

2015-02-17 13:18:34 Abanoub

вы упускаете # идентификатор в селекторе JQuery

$(document).ready(function() { 
     $("#right").hover(function() { 
      $("#main").css("opacity","0.4"); 
      $("#right").css("visibility","visible"); 
     }, function() { 
      $("#main").css("opacity","1"); 
      $("#right").css("visibility","hidden"); 
     }); 
    });

источник

2015-02-17 13:09:26

Не мог набрать достаточно быстро, вы избили меня. ha –

Это не решит проблему. Проблема в том, что скрытые элементы не будут вызывать никаких событий. До тех пор, пока DOM-элемент скрыт, никакой обработчик не будет уведомлен о происходящих событиях. – serjoscha

@serjoscha oops, вы правы. для меня явно слишком рано. –

Вы не можете парить над скрытой element.You являются обязательным событием #right
которое visibility:hidden
изменений CSS свойство права на:

#right { 
     position: absolute; 
     margin-left: -310px; 
     margin-top: 320px; 
    }

теперь элемент можно увидеть в DOM и hover событие инициируется

JSBIN

источник

2015-02-17 13:10:42 StateLess

Правильно! Чтобы прояснить: скрытые элементы не будут вызывать какие-либо события, поэтому обработчик не будет использоваться, поскольку нет обработчика событий ... – serjoscha

попробовать этот

<!DOCTYPE html> 
<html> 
<head lang="en"> 
<meta charset="UTF-8"> 
<title></title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<style> 
    body { 
     margin: 0; 
     padding: 0; 
    } 

    #main { 
     opacity: 1; 
    } 

</style> 
<script> 
    $(document).ready(function() { 
     $("#right").hover(function() { 
      $("#main").css("opacity","0.4"); 
      $("#right").css("visibility","visible"); 
     }, function() { 
      $("#main").css("opacity","1"); 
      $("#right").css("visibility","hidden"); 
     }); 
    }); 
</script> 
</head> 
<body> 
    <img id="main" src="img/1477253.jpg" /> 
    <img id="right" src="img/1477253.jpg" /> 
    <img id="center" src="img/Untitled-2.png" /> 
</body> 
</html>

Удалить класс CSS т.е. #right и #center и посмотреть результат. Из-за этого класса вы не можете видеть изображение.

источник

2015-02-17 13:21:45

Вам не хватает # и скрытый элемент означает, что он ушел. Вы не можете навести курсор мыши на него. Вместо этого используйте opacity 0. Другой момент, ваше положение изображения может не показывать изображение на экране, за исключением того, что оно очень велико, поэтому я прокомментирую его.

Это модифицированная версия.

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <style> 
     body { 
      margin: 0; 
      padding: 0; 
     } 

     #main { 
      opacity: 1.0; 
     } 

     #right { 
      /*position: absolute;*/ 
      /*margin-left: -310px;*/ 
      /*margin-top: 320px;*/ 
      opacity: 0.0; 
     } 

     #center { 
      /*position: absolute;*/ 
      /*margin-left: -655px;*/ 
      /*margin-top: 20px;*/ 
      opacity: 0.0; 
     } 
    </style> 
    <script> 
     $(document).ready(function() { 
      $("#right").hover(function() { 
       $("#main").css("opacity","0.4"); 
       $("#right").css("opacity","1.0"); 
      }, function() { 
       $("#main").css("opacity","1"); 
       $("#right").css("opacity","0.0"); 
      }); 
     }); 
    </script> 
</head> 
<body> 
<img id="main" src="img/1477253.jpg"> 
<img id="right" src="img/Untitled-1.png"> 
<img id="center" src="img/Untitled-2.png"> 
</body> 
</html>

источник

2015-02-17 13:21:50 spicydog

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <style> 
     body { 
      margin: 0; 
      padding: 0; 
     } 

     #main { 
      opacity: 1; 
     } 

     #right { 
      position: absolute; 
      margin-left: -310px; 
      margin-top: 320px; 
      visibility: hidden; 
     } 

     #center { 
      position: absolute; 
      margin-left: -655px; 
      margin-top: 20px; 
      visibility: hidden; 
     } 
    </style> 
    <script> 
     $(document).ready(function() { 
      $("#right").hover(function() { 
       $("#main").css("opacity","0.4"); 
       $("#right").css("visibility","visible"); 
      }, function() { 
       $("#main").css("opacity","1"); 
       $("#right").css("visibility","hidden"); 
      }); 
     }); 
    </script> 
</head> 
<body> 
<img id="main" src="img/1477253.jpg"> 
<img id="right" src="img/Untitled-1.png"> 
<img id="center" src="img/Untitled-2.png"> 
</body> 
</html>

источник

2015-02-17 13:27:21

Используйте это.

$(document).ready(function() { 
    $("#right").mouseover(function() { 
     $("#main").css("opacity", "0.4"); 
     $("#right").css("opacity", "1"); 
    }).mouseleave(function() { 
     $("#main").css("opacity", "1"); 
     $("#right").css("opacity", "0"); 
    }); 
});

DEMO

источник

2015-02-17 13:45:07

JQuery наведите курсор на изображение не работает

ответ

Смежные вопросы