with jQuery，在悬停时添加class =“hover”，比将元素添加到悬停元素

我希望我有几个div [最多10个]，我想自动添加其中一个并在特定元素悬停时显示它，我想我不能逐个增加他们都一个元素，并隐藏他们都一个接一个，并显示他们再次使用:hoverwith jQuery，在悬停时添加class =“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。但我需要更灵活和专业的解决方案。

来源

2013-04-06 Mohamed Samir

请单击复选标记旁边的一个答案，如果它帮助了你这样将来游客可以答案得到帮助。 – lucuma 2013-04-06 19:36:54

我会尽快看到我需要的答案，或者最接近的答案:(。 – 2013-04-10 18:02:28

添加跨度到的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

来源

2013-04-06 16:07:28 adeneo

）正如我之前所说的那样，我很难将'span'和把它藏在'div'里我不能为30多个div做这个@ – 2013-04-10 18:07:50

@MohamedSamir - 我给答案加了一点东西！ – adeneo 2013-04-10 18:51:08

将跨度添加到每个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}

来源

2013-04-06 16:03:58 lucuma

我知道我可以使用这种方法，但是我需要像例子一样创建'divs'外的'span'。我想我不需要使用任何'：hover'解决方案，它需要'span'来代替'divs' :( – 2013-04-10 18:06:43

with jQuery，在悬停时添加class =“hover”，比将元素添加到悬停元素

回答

相关问题