將鼠標懸停在列表項目上時會出現div？

當用戶將鼠標懸停在列表項上時，我遇到了很多麻煩，使得div在我的網站上顯示。基本上，我有一個鏈接列表。當用戶在其中一個懸停時，我需要兩個div出現 - 一個是所有懸停通用的背景框，另一個是充滿與該列表項目相關的內容。當鼠標離開「row2」區域時（所有內容都包含在內），我還需要所有div消失。下面的腳本是半工作的，但是，如果用戶將鼠標從一個列表項快速移動到下一個列表項，項目「疊加」並且不會正確消失。將鼠標懸停在列表項目上時會出現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>

...這是一個怪物，我知道（而且可能非常低效）。

有人可以推薦一個更好和更少的錯誤的方式來完成這項任務？

謝謝!!!

來源

2011-07-06 Febrium

說實話，我並沒有很努力地看待這個，但是如果你用「鼠標」換掉了你的「鼠標懸停」呢？（這是你通常與「mouseleave」配對......）

來源

2011-07-06 02:23:03

克里斯汀，謝謝你的提示。我只是嘗試了交換，不幸的是發生了同樣的錯誤（從一個到下一個快速懸停時出現多個框）。 – Febrium

嗯...怎麼樣搗毀這些低劣的東西，用「懸停」來代替？ http://api.jquery.com/hover/ –

$（...）.hover（onHoverFunction，onMouseLeaveFunction）對於你正在做的事情來說是簡單的速記，雖然它使用了我認爲的「mousenters」事件。 – jdc0589

~~這聽起來像你正試圖完成漂亮的工具提示/氣球消息。雖然我不總是喜歡只是建議一個jQuery插件來做事情，但這對其中一個很有用。~~

~~這是一個相當不錯的插件 http://flowplayer.org/tools/tooltip/index.html，以及 http://jquery.bassistance.de/tooltip/demo/~~

對不起我沒有立即回覆，辛苦一點麻煩拍攝沒有一些代碼工作。如果沒有其他人發佈可接受的回覆，請考慮發佈jsfiddle演示。

這是有點風馬牛不相及，但是當你有可能就是工作正常，我只是還沒有見過的語法，它更經常可以看到像選擇：

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

寫成：

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

你需要努力減少冗餘代碼，這將使問題更容易解決。

來源

2011-07-06 02:28:46 jdc0589

也許一些不那麼冗長的東西更容易管理，我敲了一個粗略的例子，其中我持有div的引用以顯示鏈接的rel屬性。它減少了一個相對簡單的任務所需的代碼剪切量 - 儘管這個例子可能不完全如您所描述的那樣 - 這是一種更簡單的方法。

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; 
}

的Javascript：

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

來源

2011-07-06 02:49:46 sauldraws

啊你打我吧。我的答案類似，但基本相同。好的！ +1 –

感謝您的提示！我現在唯一的問題是能夠懸停在彈出的div上（可以說我想把鏈接放在那裏）。我該如何實現這一點？ – Febrium

@sauldraws：我已經將你的jsfiddle的代碼編輯到了你的文章中，所以如果鏈接將來會中斷，你在SO上的答案仍然對其他人有用。 – DarthJDG

我建議你安裝在T的詳細信息您的元素自己指定哪個div將在鼠標懸停上顯示。

嘗試類似：

$("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/

來源

2011-07-06 02:54:47

將鼠標懸停在列表項目上時會出現div？

回答

相關問題