使用jQuery，在悬停时添加class =“hover”，然后将元素添加到hovered元素

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解决方案的帮助，该解决方案需要在span内放置和隐藏div。 但我需要更灵活和专业的解决方案。

Answer 1

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

Answer 2

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