JQuery가 SRC onmouseover/hover 이미지를 변경하지 못했습니다.

일부 연구를 마친 후 아래 코드가 이미지 소스를 변경하는 데는 잘 작동하지만 그렇지 않습니까?JQuery가 SRC onmouseover/hover 이미지를 변경하지 못했습니다.

$("#li_1").mouseover(function() { 
      $(this).attr("src", "images/hover_12.png"); 
     }, function() { 
      $(this).attr("src", "images/ori_12.png"); 
     });

HTML 코드 :

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="demo.css"> 
<style> 
li{ 
    display: block; 
} 
</style> 
</head> 

<body> 
    <div id='wrap'> 
     <div id="clickable_div">MENU</div> 
      <div id="nav_menu"> 
       <ul class="dropDown"> 
        <li id="li_1"><img src="images/ori_12.png"></li> 
        <li id="li_2"><img src="images/ori_14.png"></li> 
        <li id="li_3"><img src="images/ori_15.png"></li> 
        <li id="li_4"><img src="images/ori_16.png"></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

</body> 
<script> 
     $("#li_1").mouseover(function() { 
      $(this).attr("src", "images/hover_12.png"); 
     }, function() { 
      $(this).attr("src", "images/ori_12.png"); 
     }); 

     $('#wrap').mouseover(function(){ 
      $('#nav_menu').slideDown(); 
     }); 
     $('#wrap').mouseleave(function(){ 
      $('#nav_menu').slideUp(); 
     }); 

    </script> 
</html>

DEMO.CSS :

#clickable_div {width:166px; background-color:#9c9c9c;} 
*{margin:0; padding:0} 
#nav_menu{width:166px; height:auto; background-color:#CCC;display:none;} 

#wrap{ width:166px }

아이디어는 매우 간단합니다. 요소 위로 마우스를 이동하고 항목을 나열하는 드롭 다운 느낌을 갖기 위해 노력하고 있으며, 각 항목에 대해 li의 이미지가 대체됩니다.

출처

2013-09-25 Isaac Lem

IMG 요소가 아닌 LI 요소의 src을 변경하려는 것 같습니다.
이미지 src를 다시 정상으로 변경하려면 mouseout 이벤트가 필요합니다.

이 시도 : 각 이미지에 대한 코드의 블록을 추가 할 필요가 없습니다

당신이 동적 원하는 경우

$("#li_1 img") 
    .mouseover(function() { 
     $(this).attr("src", "images/hover_12.png"); 
    }) 
    .mouseout(function() { 
     $(this).attr("src", "images/ori_12.png"); 
    });

는, 이것을 시도.

$('#nav_menu li img') 
    .mouseover(function() { 
     this.src = this.src.replace('/ori_', '/hover_'); 
    }) 
    .mouseout(function() { 
     this.src = this.src.replace('/hover_', '/ori_'); 
    });

출처

2013-09-25 02:23:29

와우 !! 업데이트 해 주신 것에 대해 감사드립니다. –

환영합니다. 다행입니다. –

JQuery가 SRC onmouseover/hover 이미지를 변경하지 못했습니다.

답변

관련 문제