JQuery Hover Tip

Question

Я пытаюсь изменить следующий скрипт, чтобы показать / скрыть подсказку, только когда "?" и не весь блок "li"

HTML:

<ul class="tips">
<li>
    <a href="#" class="tooltip">?</a> Feature 1
    <div class="tip">
    <h4>Tip Title 1</h4>
    <h4>Tip Q</h4>
    <p>Tip A</p>
    </div>
</li>
<li>
    <a href="#" class="tooltip">?</a> Feature 2
    <div class="tip">
    <h4>Tip Title 2</h4>
    <h4>Tip Q</h4>
    <p>Tip A</p>
    </div>
</li>
<li>
    <a href="#" class="tooltip">?</a> Feature 3
    <div class="tip">
    <h4>Tip Title 3</h4>
    <h4>Tip Q</h4>
    <p>Tip A</p>
    </div>
</li>
</ul>

Сценарий JQuery

$("ul.tips li").hover(function() {
    $(this).find("div").stop()
    .fadeIn()
    .css("display","block")

}, function() {
    $(this).find("div").stop()
    .fadeOut()
});

CSS:

.tips div  {
display: none;
position: absolute;
bottom: 0;
width: 100%;
height;auto;
background: #e00;
left:0;
}​​​​​​​​​

Я пытался изменить скрипт, как это

$("ul.tips li a").hover(function() {

поэтому он нацелен на тег "a", но в итоге ничего не показывает.

Answer 1

Вы должны закончить свои строки JS:

$("ul.tips li a").hover(function() {
    $(this).siblings("div.tip").stop()
    .fadeIn()
    .css("display","block"); // <-- gotta put the semi-colon

}, function() {
    $(this).siblings("div.tip").stop()
    .fadeOut(); //<-- here too
});

Answer 2

Это кажется необычным, так как кажется, что оно должно работать, но попробуйте:

$(".tooltip").hover(function() { ... });

Вы также должны изменить $(this).find("div")... на $(this).next()...

Answer 3

Вам нужно убедиться, что вы завернули свой обработчик событий в функцию готовности документа в jQuery:

$(document).ready(function () {
$("ul.tips li").hover(function() {
    $(this).find("div").stop()
    .fadeIn()
    .css("display","block")

}, function() {
    $(this).find("div").stop()
    .fadeOut()
});
});

Ваше событие наведения не будет привязано к элементам html, если только элементы html не были загружены в дерево DOM. $(document).ready() задерживает запуск JS, включенного в переданную анонимную функцию, до тех пор, пока не будет загружена остальная часть HTML-документа и не будет готово дерево DOM.

Подробнее читайте по адресу: http://docs.jquery.com/Tutorials:Introducing_$(document).ready()