Не стандартный hover
Добрый вечер.
Я новичок в js и jQ и у меня возникла сложность с jQuery. Допустим есть код:
<div id="wrapper">
<div class="block1">
<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
<div class="4"></div>
</div>
<div class="block2">
<ul>
<li class="1"></li>
<li class="2"></li>
<li class="3"></li>
<li class="4"></li>
</ul>
</div>
</div>
Все блоки div с классами 1,2,3,4 имеют свойство: "display: none" И нам нужно чтобы при ховере на один из элементов списка у блока с таким же классом добавлялся класс (например "open") Средствами css(position:absolute, display: block) блок с классом "open" будет перекрывать элемент списка по которому мы навели и когда мы уводим мышь класс не пропадает. Как на jQuery это можно реализовать? Чтобы при наведении на нужный элемент списка появился нужный блок перекрывающий его, а когда мы убираем курсор за пределы блока div с этим классом, с него он пропадает. |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".block2 ul > li").mouseenter(function() {
var el = $( ".block1 ." + this.className );
if ( !el.hasClass( 'open' ) ) {
el.addClass("open");
}
});
});
</script>
<style type="text/css">
.block1 > div {
display: none;
}
.open {
position: absolute;
display: block!important;
}
</style>
<div id="wrapper">
<div class="block1">
<div class="1">контент 1</div>
<div class="2">контент 2</div>
<div class="3">контент 3</div>
<div class="4">контент 4</div>
</div>
<div class="block2">
<ul>
<li class="1">список 1</li>
<li class="2">список 2</li>
<li class="3">список 3</li>
<li class="4">список 4</li>
</ul>
</div>
</div>
|
| Часовой пояс GMT +3, время: 13:03. |