Question

我希望鼠标悬停在（li.title）上，然后用jquery显示next（div.content）。我测试了一些代码但是当鼠标悬停标题时，则只显示一个内容。

现在我该怎么办？

我的Html代码

<div class="posts">

<li class="title">
<a href="#">Title post</a>
</li>

<div class="content">
Content
</div>

</div>

<div class="posts">

<li class="title">
<a href="#">Title post</a>
</li>

<div class="content">
Content
</div>

</div>

<div class="posts">

<li class="title">
<a href="#">Title post</a>
</li>

<div class="content">
Content
</div>

</div>

Answer 1

如果您使用display隐藏元素，那么使用Jquery可以执行此操作：

$('.title').hover(function(){
  $(this).next('.content').toggle();
})

检查此 DemoFiddle

使用CSS也可以用以下方法显示元素：

.title:hover + .content {
   display:block;
}

检查此 DemoFiddle

但请注意，因为您无法在li之外使用ul元素，而您的代码无效，请将li更改为div

Answer 2

将您的内容重命名为content1，content2，content3以查看不同的正文和代码：

$('.title').mouseover(function () {

    alert($(this).next('div').html());
});

然后您可以隐藏所有内容并显示正确的下一个内容

Answer 3

看看这对你有帮助。

http://jsfiddle.net/77wc17yo/

$('.posts').hover(function() {
    $(this).children('.content').show();
});

Answer 4

首先，你的HTML / DOM结构不正确，“li”标签必须是“ul”或“ol”的直接子节点，并且不能有“li”以外的兄弟节点。不正确的DOM结构可能导致许多这样的问题。

将您的DOM结构修改为此类

<div class="posts">

<h4 class="title">
<a href="#">Title post</a>
</h4>

<div class="content">
Content
</div>

</div>

然后使用以下脚本

$(document).ready(function(){

  $('.title').on('hover',function(){
     $(this).next('.content').css({border: red solid 2px, display: block});
  });
});

mouseover一些div并在jquery中显示另一个div

4 个答案: