javascript - 悬停功能不想工作

Question

我一直在尝试制作一个代码，当将鼠标悬停在其父 li 上时，该代码会显示一个包含描述的 div，但它不会工作..

我几乎可以肯定它与结构或css有关。

jQuery：

$('.featured_entry li').hover(function() {
   $(this).find('.description').show(100); 
}, function() {
   $(this).find('.description').hide(100);
});

HTML：

<div class="featured_entry">
<ul>
    <li>
        <div class="description">blabalbla</div>
        <div class="box"></div>
    </li>
</ul>    
</div>

CSS：

.box {
    width: 200px;
    height: 200px;
    background: #000;
}

.description {
    background: #142450;
    width: 200px;
    height: 100px;

    display: none;
}

http://jsfiddle.net/Wy3wW/9/

Answer 1

http://jsfiddle.net/Wy3wW/10/

这是有效的。您忘记添加 jquery 库。您只需要添加： <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

到你的文件

以及 .ready 功能：

$(document).ready(function(){ /* jquery code */ }); 

Answer 2

您可能需要推迟执行，直到 DOM 也被加载：

$(function(){
    $('.featured_entry li').hover(function() {
         $(this).find('.description').show(100); 
         }, function() {
            $(this).find('.description').hide(100);
     });
});