mouseover некоторый div и показать другой div в jquery

Question

Я хочу, когда mouseover на (li.title), а затем показать следующий (div.content) с jquery. Я протестировал несколько кодов, но когда вы наводите название мыши, просто покажите один контент.

сейчас что я могу сделать?

мои 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 является неправильным, «литий» тег должен быть прямым потомком «ул» или «ола», и не могу иметь, кроме «Ли» братьев и сестер , Неправильная структура 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}); 
    }); 
});