Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.10.2012, 22:08
Новичок на форуме
Отправить личное сообщение для flintovich Посмотреть профиль Найти все сообщения от flintovich
 
Регистрация: 18.10.2012
Сообщений: 1

Не стандартный 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 с этим классом, с него он пропадает.
Ответить с цитированием
  #2 (permalink)  
Старый 18.10.2012, 22:46
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

<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>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine

Последний раз редактировалось devote, 18.10.2012 в 22:51.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение свойства :hover по клику дива BoB jQuery 6 21.10.2012 13:36
Установка цвета через функцию .css() сбрасывает цвет для :hover xintrea jQuery 4 18.08.2012 15:38
:hover и :active у дочерних и родительских элементов Dimus Элементы интерфейса 6 03.06.2012 19:54
можно ли снять обработчик с hover DjDiablo jQuery 1 08.09.2011 01:51
Изменение стиля родительского элемента при :hover дочернего lanzs Элементы интерфейса 2 16.10.2010 13:28