当前位置: 动力学知识库 > 问答 > 编程问答 >

html - mouseover some div and show another div in jquery

问题描述:

I want when mouseover on (li.title) , then show next (div.content) with jquery.

i tested some codes but when mouseover title, then just show one content.

now what can i do?

my Html Codes

<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>

网友答案:

rename your content as content1, content2, content3 to see the different body and the code :

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

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

then you can hide all content and show up the right next content

网友答案:

If you are using display to hide the elements then With Jquery you can do this:

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

Check this DemoFiddle

Also just with CSS you can show the element with this:

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

Check this DemoFiddle

But take in care because you can't use li elements outside an ul your code is invalid change the li to div

网友答案:

See if this helps you.

http://jsfiddle.net/77wc17yo/

$('.posts').hover(function() {
    $(this).children('.content').show();
});
网友答案:

First of all, your HTML/DOM structure is incorrect, "li" tag must be direct child of "ul" or "ol", and cant have siblings other than "li". Incorrect DOM structure can lead to many issue like this.

Fix your DOM structure to be like this

<div class="posts">

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

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

</div>

then use the following script

$(document).ready(function(){

  $('.title').on('hover',function(){
     $(this).next('.content').css({border: red solid 2px, display: block});
  });
});
分享给朋友:
您可能感兴趣的文章:
随机阅读: