Jquery Hidden DIV Mouseover Подсказка

Question

Я исследовал это довольно хорошо, но не смог ничего найти, вероятно, было бы быстрее написать это сам!У меня есть контент, содержащийся в тегах 'li', внутри li находятся DIV, которые скрыты от пользователя.Я в основном ищу что-то, что, когда вы наводите курсор мыши на конкретный li, div, содержащийся в нем, всплывает и зависает относительно мыши все время, когда курсор находится над li.Кто-нибудь знает что-то, что будет делать именно это?

Answer 1

Вы можете сделать это с помощью jQuery и CSS:

HTML:

<ul>
    <li>
        <div>Content goes here</div>
        <div class="tooltip">Tooltip!</div>
    </li>
    <li>
        <div>More content!</div>
        <div class="tooltip">Another tooltip!</div>
    </li>
</ul>

CSS:

.tooltip {
    position:absolute;
    display:none;
    z-index:1000;
    background-color:black;
    color:white;
    border: 1px solid black;
}

JavaScript:

$("li").bind("mousemove", function(event) {
    $(this).find("div.tooltip").css({
        top: event.pageY + 5 + "px",
        left: event.pageX + 5 + "px"
    }).show();
}).bind("mouseout", function() {
    $("div.tooltip").hide();
});

Вот что происходит:

1. Обработчик события для события mousemove прикреплен к каждому элементу списка.
2. Внутри этого слушателя метод find используется для поиска div с классом tooltip, который находится под li, в котором произошло событие.
3. Свойства CSS top и left устанавливаются в соответствии с местоположением, в котором произошло событие (текущее местоположение мыши), и отображается div.
4. Добавлен еще один обработчик события mouseout, который скрывает все всплывающие подсказки.

Вы можете настроить селекторы, чтобы они отражали вашу точную структуру HTML. Вот рабочий пример: http://jsfiddle.net/andrewwhitaker/tSHZS/

Answer 2

Будет ли это работать для вас?

http://flowplayer.org/tools/tooltip/index.html

Я не уверен, что он специально обрабатывает ваш сценарий, где вы хотите показать содержимое div при наведении курсора мыши на li, но я знаю, что он может отображать содержимое HTML.

Answer 3

EDIT

неправильно понял ваш вопрос. См. Источник на этой странице:

http://www.lbstone.com/reference/jquery/follow_mouse.html

Здесь вы можете найти код, который делает то, что вы хотите