наведение мыши jQuery связывается для показа скрытого отделения
Я столкнулся с событием mouseOver на extratorrent сайте как следующее изображение.
сопроводительный текст http://img3.imageshack.us/img3/4516/usercommment999.jpg
Когда Вы нависаете мышь над ссылкой имени пользователя, она показывает скрытое отделение. Крутой и гладкий.
Я плохо знаком с jQuery. Кто-либо может показать мне, как добраться, начинают на правильном пути делать это?Спасибо.
Обновление 1:
Я записал что-то как следующая попытка получить результат. Проблема состоит в том, что, когда я мышь мышь ссылка привычка Отделения остаюсь, она сразу исчезает.
Untitled Document
Link text
- Coffee
- Tea
- Milk
Что сделать, чтобы заставить Отделение остаться видимым когда мышь по Отделению?
3 ответа
При наведении указателя мыши на текст ссылки вы устанавливаете Visiblility div "hello" на visible. Затем при наведении курсора мыши на div «hello» вы также устанавливаете видимость div «hello» на visible. При наведении курсора мыши на div «hello» вы устанавливаете его видимость как «скрытый». Примерно так:
$("#show_div").mouseover(function() { $("#hello").css('visibility','visible'); });
$("#hello").mouseover(function() { $("#hello").css('visibility','visible'); });
$("#hello").mouseout(function() { $("#hello").css('visibility','hidden'); });
Вы можете использовать функцию .hover :
$(function() {
$('#divOne').hover(function() {
$('#divTwo').show();
}, function() {
$('#divTwo').hide();
});
});
, где у вас есть два div:
<div id="divOne">div one</div>
<div id="divTwo" style="display: none;">div two</div>
UPDATE:
Как упоминалось в разделе комментариев, второй div исчезнет, если мышь покинет первое. Существует много плагинов , которые позволят вам добиться желаемого поведения. Этот выглядит особенно красиво.
С помощью простого HTML:
<div class="div1">Hover me</div>
<div class="div2" style="display: none">Hi, there</div>
При переходе через div1 вы показываете div2 и скрываете его только после того, как пользователь попадет внутрь, а затем exit:
<script type="text/javascript">
$('.div1').hover(function() {$('.div2').show()});
$('.div2').hover(function() {}, function() {$('.div2').hide()});
</script>
Это быстрое, неоптимальное решение, но оно будет работать, даже если два div не являются смежными.