jQuery 호버 호 문제 - 마지막 li 요소가 호버 머물임

Question

너무 많은 옵션을 시도했지만 결과가 없습니다. 그러나, 나는 이미지

<div id="news1" class="news"> 
    <a href="#" target="_blank"><img src="img/news/news1.jpg" width="340" height="255" alt="" title="" /></a> 
</div> 
<div id="news2" class="news"> 
    <a href="#" target="_blank"><img src="img/news/news2.jpg" width="340" height="289" alt="" title="" /></a> 
</div> 
<div id="news3" class="news"> 
    <a href="#" target="_blank"><img src="img/news/news3.jpg" width="340" height="232" alt="" title="" /></a> 
</div> 
<div id="news4" class="news"> 
    <a href="#" target="_blank"><img src="img/news/news4.jpg" width="340" height="250" alt="" title="" /></a> 
</div> 
<div id="news5" class="news"> 
    <a href="#" target="_blank"><img src="img/news/news5.jpg" width="340" height="226" alt="" title="" /></a> 
</div> 

이제 기본적으로 class="news"이 display: none;입니다

이 코드

<ul class="left_nav"> 
    <li class="left_nav1"><a href="#">opt1</a></li><li class="left_nav2"> 
    <a href="#">opt1</a></li><li class="left_nav3"> 
    <a href="#">opt1</a></li><li class="left_nav4"> 
    <a href="#">opt1</a></li><li class="left_nav5"> 
    <a href="#">opt1</a></li> 
</ul> 

이러한 사업부의의가있다. 이 jQuery를

$(function() { 
    $("ul.left_nav li").hover(function() { 
      index = $("ul.left_nav li").index(this) + 1; 
      $('#news' + index).addClass('active'); 
     }, function() { 
      $('#news' + index).removeClass('active'); 
     } 
    ); 
}); 

와 display: block;으로 정의 된 클래스 active을 추가하여 이제 호버에 appering하는 DIV. 마우스가 <ul> 메뉴에있을 때이 클래스를 다시 제거하고 싶습니다. 그러나 마우스가 메뉴를 떠난다면, 마지막으로 <li>이 떠돌 았고, 이미지가있는 div도 볼 수있게 유지됩니다. 내가 어떻게 깨달을 수 있니?

감사합니다!이 같은 ...에 대해

당신은 유혹을 제공 할 것입니다 http://jsfiddle.net/HcjLW/1/는 고유 ID의 일종 div를 어떻게

Answer 1

및 각 이벤트 분명 다른 뉴스하지만 mouseovered 하나를 만드는 것보다.

$("ul.left_nav li").mouseover(function() { 

    index = $("ul.left_nav li").index(this)+1; 

    $('.news').removeClass('active'); 

    $('#news'+index).addClass('active'); 

}); 

Answer 2

그래서 우리는 ID (또는 인덱스)에 저를 번역 할 수 있습니다 이미지와 divs의. 클래스 ID를 대신

<ul class="left_nav"> 
     <li id="left_nav1"><a href="#">opt1</a></li> 
     ... 
    </ul> 

JS와

가

HTML

$("ul.left_nav li").hover(function() { 
     $('#news'+ $(this).attr('id').replace('left_nav','')).addClass('active'); 
    }, function() { 
     $('#news'+ $(this).attr('id').replace('left_nav','')).removeClass('active'); 
    }); 

---

청소기 솔루션

---

더 나은 아이디어는 모든 left_nav 항목에 공통 클래스를 부여하고 data-XXXX 속성을 사용하여 색인 (data-index)을 할당하는 것입니다.

http://jsfiddle.net/HcjLW/3/

HTML

<ul class="left_nav"> 
    <li class="left_nav_item" data-index="1"><a href="#">opt1</a></li> 
    <li class="left_nav_item" data-index="2"><a href="#">opt1</a></li> 
    <li class="left_nav_item" data-index="3"><a href="#">opt1</a></li> 
    <li class="left_nav_item" data-index="4"><a href="#">opt1</a></li> 
    <li class="left_nav_item" data-index="5"><a href="#">opt1</a></li> 
</ul> 

JS

마우스 오버와 그것을 결합

$(".left_nav_item").hover(function() { 
     $('#news'+ $(this).data('index')).addClass('active'); 
    }, function() { 
     $('#news'+ $(this).data('index')).removeClass('active'); 
    }); 

Answer 3

당신은 문서의 준비 이벤트를 포함하지 않았다 :

$(document).ready(function() { 
    $("ul.left_nav li").hover(function() { 
     index = $("ul.left_nav li").index(this)+1; 
     $('#news'+index).addClass('active'); 
    }, function() { 
     $('#news'+index).removeClass('active'); 
    }); 
}); 

이, 당신이 염두에 두어야 할 것을 이해 귀하의 답변