0

我希望我有几个 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第一次加载时它没有隐藏（换句话说，它应该在第一次加载时隐藏，并且只在悬停时出现）。

我认为当我尝试使用失败的尝试时会更好onmouseover="this.className='，.appendTo但我不知道将它们一起使用的正确方法。

任何想法，建议？

更新：伙计们，我非常感谢您对:hover需要放置和隐藏span内部的解决方案的帮助div。但我需要更灵活、更专业的解决方案。

4

2 回答 2

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}
于 2013-04-06T16:03:58.147 回答
0

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

小提琴

编辑：

使用索引来定位正确元素的 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');
    });
});

小提琴

于 2013-04-06T16:07:28.170 回答