При наведении на пункт меню показывать содержимое соответствующего блока

205

22 апреля 2018, 20:12

Мне нужно чтобы при наведении на пункт меню показывался контент, который соответствует этому пункту но лежит в другом блоке standart-content. И как только ховер с пункта меня убирается - снова отображался стандартный контент . Не могу понять как это реализовать в jquery, очень надеюсь на вашу помощь. Каждый .item-content соответствует пункту из меню, по задумке. Примерную разметку набросал для понимания.

.container { 
width: 600px; 
} 
.container:after { 
content: ''; 
display: block; 
clear: both; 
} 
.container ul { 
float: left; 
width: 33.33%; 
} 
.container .content-ul { 
width: 33.33%; 
float: left; 
} 
.item-content { 
display: none; 
}

<div class="container"> 
<ul> 
<li><a href="">Пункт 1</a></li> 
<li><a href="">Пункт 2</a></li> 
<li><a href="">Пункт 3</a></li> 
</ul> 
<ul> 
<li><a href="">Пункт 4</a></li> 
<li><a href="">Пункт 5</a></li> 
<li><a href="">Пункт 6</a></li> 
</ul> 
<div class="content-ul"> 
<div class="standart-content"> 
Это стандартный контент 
</div> 
<div class="item-content"> 
Тут контент пункта 1 
</div> 
<div class="item-content"> 
Тут контент пункта 2 
</div> 
<div class="item-content"> 
Тут контент пункта 3 
</div> 
<div class="item-content"> 
Тут контент пункта 4 
</div> 
<div class="item-content"> 
Тут контент пункта 5 
</div> 
<div class="item-content"> 
Тут контент пункта 6 
</div> 
</div>