JQuery Наведите курсор мыши, чтобы показать скрытый div - PullRequest
Новая
       5

JQuery Наведите курсор мыши, чтобы показать скрытый div

12 голосов
/ 26 июня 2010

Я столкнулся с событием наведения курсора мыши на сайте, похожем на следующее.

альтернативный текст http://img3.imageshack.us/img3/4516/usercommment999.jpg

При наведении указателя мыши на ссылку с именем пользователя отображается скрытый элемент div. Довольно аккуратно и гладко.

Я новичок в jQuery. Может кто-нибудь показать мне, как начать на правильном пути, чтобы сделать это? Спасибо.

Обновление 1:

Я написал что-то вроде следующего, пытаясь получить результат. Проблема в том, что когда я наведу указатель мыши на ссылку, которая не будет сохранена, Div немедленно исчезнет. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
       <script type="text/javascript">
        $(document).ready(function()
        {


    $("#show_div").mouseover(function() { $("#hello").css('visibility','visible'); });
    $("#show_div").mouseout(function() { $("#hello").css('visibility','hidden'); });


        });
        </script>

    </head>

    <body>

    <a id="show_div" href="#">Link text</a> 
    <div id="hello" style="visibility:hidden;">
        <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
    </div>


    </body>
    </html>

Что нужно сделать, чтобы Div оставался видимым при наведении мыши на Div?

Ответы [ 4 ]

12 голосов
/ 26 июня 2010

При наведении указателя мыши на текст ссылки, вы устанавливаете видимость элемента div "hello" в видимое состояние. Затем, наведя указатель мыши на div "hello", вы также устанавливаете видимость div "hello" в visible. При наведении мыши на div "hello" вы устанавливаете его видимость на "hidden". Примерно так: 

$("#show_div").mouseover(function() { $("#hello").css('visibility','visible'); });
$("#hello").mouseover(function() { $("#hello").css('visibility','visible'); });
$("#hello").mouseout(function() { $("#hello").css('visibility','hidden'); });
3 голосов
/ 26 июня 2010

Вы можете использовать функцию .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 исчезнет, ​​если мышь покинет первый. Есть много плагинов , которые позволят вам достичь желаемого поведения. Этот выглядит особенно красиво.

0 голосов
/ 19 августа 2015

ИСПОЛЬЗУЙТЕ ЭТО $ (document) .on ("click", "# test-element", function () {});

0 голосов
/ 26 июня 2010

С простым HTML: 

<div class="div1">Hover me</div>
<div class="div2" style="display: none">Hi, there</div>

При переходе через div1 вы показываете div2 и скрываете его только после того, как пользователь войдет в него и затем выйдете: 

<script type="text/javascript">
$('.div1').hover(function() {$('.div2').show()});
$('.div2').hover(function() {}, function() {$('.div2').hide()});    
</script>

Это быстрое, неоптимальное решение, но оно будет работать, даже если два div не соседствуют.

...