2013-12-24 4 views
0

Я пытаюсь использовать user Wind Shear's permanent hover solution на группе миниатюр. Тем не менее, я хотел бы, чтобы состояние «постоянного зависания» применялось только к одному миниатюре за раз. Поэтому, если я нахожусь на миниатюре и на странице, постоянный зависание будет применяться к этому миниатюре, но когда я нахожусь на другом миниатюре, он должен перенести палец с первого миниатюры и применить его к новому.Состояние постоянного зависания JS с поведением переключателя

HTML:

<ul class="test"> 
    <li id="onabout"> 
     <a href="">Alpha</a> 
     <ul> 
      <li>Hiya! And it persists</li> 
     </ul> 
    </li> 
</ul> 

ЯШ:

$("#onabout").one("mouseover", function() { 
    $("#onabout ul").addClass('permahover'); 
}); 

CSS:

ul { 
    display: block; 
    width: 200px; 
} 

ul li { 
    display: block; 
} 

ul li a { 
    display: block; 
    border: 1px solid #000; 
    background: #fff; 
} 

ul li a { 
    display: block; 
    border: 1px solid #000; 
    background: #fff; 
} 

ul li ul { 
    display: none; 
} 

ul li ul.permahover { 
    display: block; 
} 

Вот jsfiddle от вопроса СДВИГ ВЕТРА в: http://jsfiddle.net/jlratwil/w83BW/

пермские Функция anent hover работает отлично, но я не могу понять, как ее изменить, чтобы применить ее только к одному миниатюре за раз. Благодаря!

ответ

1

использовать .on вместо .one и удалить класс затем добавить его в наведен элемент

$(".onabout").on("mouseover", function() { 
    $('.permahover').removeClass('permahover'); 
    $(this).find("ul").addClass('permahover'); 
}); 

Demo

+0

Так просто! Благодаря! Примите, как только это позволит мне. – l85m

2

Использование .on() вместо .one()

$("#onabout").on("mouseover", function() { 
    $("#onabout ul").removeClass('permahover'); 
    $(this).find("ul").addClass('permahover'); 
}); 
Смежные вопросы