요소의 자식에 영향을주는 jQuery 객체의 요소에 핸들러 바인딩

jQuery 선택기를 사용하여 잡은 요소 집합에 mouseenter 및 mouseleave 용 핸들러를 바인딩하려고합니다. 함수는 요소의 자식에 대해 작동해야합니다.요소의 자식에 영향을주는 jQuery 객체의 요소에 핸들러 바인딩

여기 내 코드입니다 :

$(document).ready(function(){ 
    $(".topnav-link").bind("mouseenter mouseleave", function() { 
     $(this).children(".topnav").toggle(); 
    }); 
});

와 HTML의 본문에 :

<ul id="nav"> 
    <li> 
     <a class="topnav-link" href="some-url"> 
      <img class="topnav" src="nav-about-us.png" /> 
      <img class="topnav hidden" src="/images/site/nav-about-us-on.png" /> 
     </a> 
    </li> 
    <li> 
     <a class="topnav-link" href="some-url'}"> 
      <img class="topnav" src="nav-products.png" /> 
      <img class="topnav hidden" src="/images/site/nav-products-on.png" /> 
     </a> 
    </li> 
    <li> 
     <a class="topnav-link" href="some-url"> 
      <img class="topnav" src="nav-contact.png" /> 
      <img class="topnav hidden" src="/images/site/nav-contact-on.png" /> 
     </a> 
    </li> 
</ul>

이 실제로에서 잘 작동 맥/승/FF/사파리하지만 IE6과 IE8에, $(".topnav-link") 선택자가 가져온 첫 번째 요소 만 원하는 동작을 표시합니다.

제가 누락 된 부분에 대해 도움을 주셔서 감사합니다!

출처

2009-10-21 akc

그냥 경고 ('이벤트 발생')와 같은 간단한 작업을 수행 할 수 있습니까? bind 함수 내부에서 첫 번째 요소가 이벤트를 시작하는지 확인하십시오. –

원하는 동작을 오해하지 않는 한, 위의 예제는 IE8에서 저에게 잘 작동합니다. jsbin.com/axuve/edit#output – Matt

둘 다 살펴보고 의견을 보내 주셔서 감사합니다. 매트, 당신의 jsbin 예제를 본 후, 나는 다른 곳에서 사냥해야한다는 것을 깨달았습니다. 제 행동이 왜 나타나지 않았는 지요. 어리석은 느낌이 들지만 PNG에 사용했던 수정 사항이 첫 번째 링크의 내용을 제외한 모든 항목에 불완전하게 적용되어 올바르게 변경되지 않은 경우에도 영향을 미쳤습니다. 다시 한 번 감사드립니다. – akc

원하는 롤오버 효과를 얻으려면 CSS를 사용해야합니다.

자세한 내용은 CSS Technique: Fast Rollovers Without Preload을 읽으십시오.

출처

2009-10-29 13:13:22

그 기술을 알고 있지만 ... 디자인 요구 사항은 비 웹 글꼴 (이미지 또는 SIFR이어야 함)에서 클릭 가능한 nav 항목에 대한 것이 었으며, 변수 배경에 대해 투명하고 호버상에서 변경되었으며 IE6과 모두 호환됩니다 . 언급 한 CSS 기법은 A 태그에 텍스트가있는 간단한 시나리오에 대한 확실한 선택입니다. 필자의 경우 텍스트는 이미지의 일부 여야했기 때문에 CSS 기술을 사용하면 A 태그가 비어있게됩니다. 언급 해 주셔서 감사합니다. 이 스레드에서 깨끗하고 간단한 호버 효과를 찾는 사용자에게 도움이 될 수 있습니다. – akc

요소의 자식에 영향을주는 jQuery 객체의 요소에 핸들러 바인딩

답변

관련 문제