将鼠标移到某个div上，并在jquery中显示另一个div

我想在鼠标悬停在li.title上时，用jquery显示下一个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>

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

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

检查这个

此外，仅使用CSS，您就可以使用以下内容显示元素：

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

检查这个

---

但是要小心，因为您不能在ul之外使用li元素。您的代码无效。请将li更改为div

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

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

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

然后，您可以隐藏所有内容并显示右下一个内容

看看这是否有帮助

---

首先，您的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>

<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});
  });
});