with jQuery，在懸停時添加class =「hover」，比將元素添加到懸停元素

Question

我希望我有幾個div [最多10個]，我想自動添加其中一個並在特定元素懸停時顯示它，我想我不能逐個增加他們都一個元素，並隱藏他們都一個接一個，並顯示他們再次使用:hover

例子：

<div class="info1">extra info1</div> <!-- Hidden by deffult --> 
<div class="info2">extra info2</div> <!-- Hidden by deffult --> 
<div class="info3">extra info3</div> <!-- Hidden by deffult --> 
<div class="info4">extra info4</div> <!-- Hidden by deffult --> 

<div class="bla">I want info #1</div> 
<br /> 
<div class="bla">I want info #2</div> 
<br /> 
<div class="bla hovered">I want info #3</div> <div class="info3">extra info3</div> <!-- there wasn't info3, but its appeared because of the hovering --> 
<br /> 
<div class="bla">I want info #4</div> 
<br /> 

我失敗了，當我創造了這個[here]因爲我不需要css的幫助，就像你看到的，extra span在第一次加載時不會隱藏（換句話說，它應該隱藏在第一次加載，並且只出現onhover）。

我認爲它更好，當我嘗試與onmouseover="this.className='與.appendTo如失敗的嘗試，但我不知道正確的方式來使用它們在一起。

任何想法，建議？

更新：夥計們，我真的很感謝您對:hover解決方案的幫助，這個解決方案需要在div內放置和隱藏span。 但我需要更靈活和專業的解決方案。

Answer 1

添加跨度到的div：

<div class="bla">I want info #1<span class="info">extra info</span></div> 
<div class="bla">I want info #2<span class="info">extra info</span></div> 
<div class="bla">I want info #3<span class="info">extra info</span></div> 
<div class="bla">I want info #4<span class="info">extra info</span></div> 

和CSS做的：

.info {display: none;} 
.bla:hover .info {display: inline} 

FIDDLE

編輯：

一個JavaScript函數，使用索引來定位適當的元素，也許是去這裏的方式，像這樣：

$(function() { 
    var elems = $('[class^="info"]').hide().css({ 
     position: 'absolute', 
     top: 0, 
     left: 0, 
     height: 30, 
     width: 100 
    }); 

    $('.bla').on('mouseenter mouseleave', function(e) { 
     var i = $(this).index('.bla'); 
     elems.eq(i).toggle(e.type=='mouseenter'); 
    }); 
}); 

FIDDLE

Answer 2

將跨度添加到每個div開始。隱藏他們的CSS是：

`div.bla>span {display:none}` 

使用jQuery：

$('div.bla').hover(function() { 
    $('span', this).show(); 
}, function() { 
    $('span', this).hide(); 
}); 

或者你可以通過HTML和CSS這樣做沒有任何JavaScript雖然我建議你改變的div爲超鏈接，但它是沒有必要的：

http://jsfiddle.net/lucuma/ujQ5B/

<a class="blah">link<span>something</span></a> 

<div class="blah">link<span>something</span></div> 



a.blah>span {display:none} 
a.blah:hover>span {display:inline} 

div.blah>span {display:none} 
div.blah:hover>span {display:inline}