목록 항목 위로 마우스를 가져 가면 div가 표시됩니까?

Question

사용자가 목록 항목을 가리키면 내 사이트에 div가 표시되는 데 많은 문제가 있습니다. 기본적으로 링크 목록이 있습니다. 사용자가 그 중 하나를 가리키면 두 개의 div가 나타나야합니다. 하나는 배경의 모든 상자에 공통적 인 배경 상자이고 다른 하나는 해당 목록 항목과 관련된 내용으로 가득합니다. 또한 마우스가 "row2"영역 (모든 것이 포함되어 있음)을 떠날 때 모든 div가 사라져야합니다. 아래에있는 스크립트는 반 작업입니다. 그러나 사용자가 한 목록 항목에서 다른 목록 항목으로 마우스를 빠르게 이동하면 항목이 "스택되어"제대로 사라지지 않습니다.

현재이 문제를 볼 수 있습니다

:

여기

내가 현재 가지고있는 jQuery를이다,

$(document).ready(function() 
{ 
    $(".subjectarea_box,.subjectarea_box > div").hide();  

    $(".subjectarea_topics li[class!='arts-culture-recreation']").mouseover(function() 
    { 
     $("div.arts-culture-recreation").hide(); 
    }); 
    $("li.arts-culture-recreation").mouseover(function() 
    { 
     $("div.arts-culture-recreation,div.subjectarea_box").fadeIn(); 
    }); 
    $("div.row2").mouseleave(function() { 
     $("div.arts-culture-recreation,div.subjectarea_box,.subjectarea_box > div").hide(); 
    }); 

    $(".subjectarea_topics li[class!='civic-vitality']").mouseover(function() { 
     $("div.civic-vitality").hide(); 
    }); 
    $("li.civic-vitality").mouseover(function() { 
     $("div.civic-vitality,div.subjectarea_box").fadeIn(); 
    }); 
    $("div.row2").mouseleave(function() { 
     $("div.civic-vitality,div.subjectarea_box,.subjectarea_box > div").hide(); 
    }); 

    $(".subjectarea_topics li[class!='demographics']").mouseover(function() { 
     $("div.demographics").hide(); 
    }); 
    $("li.demographics").mouseover(function() { 
     $("div.demographics,div.subjectarea_box").fadeIn(); 
    }); 
    $("div.row2").mouseleave(function() { 
     $("div.demographics,div.subjectarea_box,.subjectarea_box > div").hide(); 
    }); 

    $(".subjectarea_topics li[class!='economy']").mouseover(function() { 
     $("div.economy").hide(); 
    }); 
    $("li.economy").mouseover(function() { 
     $("div.economy,div.subjectarea_box").fadeIn(); 
    }); 
    $("div.row2").mouseleave(function() { 
     $("div.economy,div.subjectarea_box,.subjectarea_box > div").hide(); 
    }); 

    $(".subjectarea_topics li[class!='education']").mouseover(function() { 
     $("div.education").hide(); 
    }); 
    $("li.education").mouseover(function() { 
     $("div.education,div.subjectarea_box").fadeIn(); 
    }); 
    $("div.row2").mouseleave(function() { 
     $("div.education,div.subjectarea_box,.subjectarea_box > div").hide(); 
    }); 

    $(".subjectarea_topics li[class!='environment-transportation']").mouseover(function() 
    { 
     $("div.environment-transportation").hide(); 
    }); 
    $("li.environment-transportation").mouseover(function() { 
     $("div.environment-transportation,div.subjectarea_box").fadeIn(); 
    }); 
    $("div.row2").mouseleave(function() { 
     $("div.environment-transportation,div.subjectarea_box,.subjectarea_box > div").hide(); 
    }); 

    $(".subjectarea_topics li[class!='financial-self-sufficiency']").mouseover(function() { 
     $("div.financial-self-sufficiency").hide(); 
    }); 
    $("li.financial-self-sufficiency").mouseover(function() { 
     $("div.financial-self-sufficiency,div.subjectarea_box").fadeIn(); 
    }); 
    $("div.row2").mouseleave(function() { 
     $("div.financial-self-sufficiency,div.subjectarea_box,.subjectarea_box > div").hide(); 
    }); 

    $(".subjectarea_topics li[class!='health']").mouseover(function() { 
     $("div.health").hide(); 
    }); 
    $("li.health").mouseover(function() { 
     $("div.health,div.subjectarea_box").fadeIn(); 
    }); 
    $("div.row2").mouseleave(function() { 
     $("div.health,div.subjectarea_box,.subjectarea_box > div").hide(); 
    }); 

    $(".subjectarea_topics li[class!='housing']").mouseover(function() { 
     $("div.housing").hide(); 
    }); 
    $("li.housing").mouseover(function() { 
     $("div.housing,div.subjectarea_box").fadeIn(); 
    }); 
    $("div.row2").mouseleave(function() { 
     $("div.housing,div.subjectarea_box,.subjectarea_box > div").hide(); 
    }); 

    $(".subjectarea_topics li[class!='public-safety']").mouseover(function() { 
     $("div.public-safety").hide(); 
    }); 
    $("li.public-safety").mouseover(function() { 
     $("div.public-safety,div.subjectarea_box").fadeIn(); 
    }); 
    $("div.row2").mouseleave(function() { 
     $("div.public-safety,div.subjectarea_box,.subjectarea_box > div").hide(); 
    }); 

}); 

</script> 

이 ...이 괴물 내가 알고있는 (그리고 아마도 몹시 비효율적) .

누군가이 작업을 수행하는 데 더 좋고 덜 버그적인 방법을 권장 할 수 있습니까?

감사합니다.

Answer 1

솔직히 말해서, 나는 이것을 아주 자세히 보지 않을 것입니다. 그러나 "마우스 오버"를 "mouseenters"와 바꾸면 어떨까요? (보통 "mouseleave"와 쌍을 이룬다.)

Answer 2

멋진 툴팁/풍선 메시지를 얻으려는 것처럼 들린다. jquery 플러그인을 사용하여 항상 작업하는 것은 좋지 않지만,이 작업은 jquery 플러그인을 사용하는 것이 좋습니다.

이 내가 몇 가지 코드 작업없이 문제가 촬영에 작은 하드, 즉각적인 응답을 해달라고 꽤 좋은 플러그인 http://flowplayer.org/tools/tooltip/index.html뿐만 아니라 http://jquery.bassistance.de/tooltip/demo/

죄송합니다. 수용 가능한 응답을 게시 한 사람이 없다면 jsfiddle 데모를 제출하는 것이 좋습니다.

이 조금 관련이없는,하지만 당신은 아마이 것은 잘 작동하고 난 그냥 전에 구문을 볼 havent 한 동안, 그것은 훨씬 더 일반적인 같은 선택기 볼 수 있습니다 :

:로 작성

$(".subjectarea_topics li[class!='arts-culture-recreation']") 

을

$(".subjectarea_topics li:not(.arts-culture-recreation)") 

중복 코드를 줄이는 작업이 필요하므로 많은 문제를 쉽게 해결할 수 있습니다.

Answer 3

어쩌면 조금 덜 장황한 것이 더 관리하기 쉬울지도 모릅니다. 링크의 rel 속성에 표시 할 div의 참조를 들고있는 거친 예제를 두드렸습니다. 비교적 단순한 작업을 위해 필요한 코드의 양을 줄입니다. 비록이 예제가 정확히 설명하지는 않았지만 훨씬 간단한 방법입니다.

http://jsfiddle.net/tkVZ4/

HTML :

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title></title> 
    </head> 
    <body> 

     <ul id="links"> 
      <li><a rel="one" href="#">one fish</a></li> 
      <li><a rel="two" href="#">two fish</a></li> 
      <li><a rel="red" href="#">red fish</a></li> 
     </ul> 

     <div id="container"> 
      container 
      <div id="one">one</div> 
      <div id="two">two</div> 
      <div id="red">red</div> 
     </div> 
    </body> 
</html> 

CSS :

#container, #container div{ 
    display: none; 
} 

자바 스크립트 :

$(function(){ 
    $('#links li a').mouseover(function(){ 
     var toShow = '#' + $(this).attr('rel'); 
     $('#container').show(); 
     $(toShow).show(); 
    }).mouseout(function(){ 
     $('#container, #container div').hide(); 
    }) 
}); 

Answer 4

나는 당신에게 t의 정보와 요소 설치를 제안 마우스 오버시 표시 할 div를 지정하는 hemselves.

$("li.arts-culture-recreation, li.civic-vitality, li.demographics") //Etc etc 
    .mouseover(function 
    { 
     var cssClass = $(this).attr("class"); 
     $("div.subjectarea_box, div." +cssClass).show(); 
    }).mouseleave(function() 
    { 
     var cssClass = $(this).attr("class"); 
     $("div.subjectarea_box, div." + cssClass).hide(); 
    }); 

jsfiddle 예 : http://jsfiddle.net/9jHyD/