使用jQuery懸停使圖像消失

Question

當鼠標懸停在元素上並顯示鼠標離開元素時，嘗試在li中隱藏img 。 我后來想要一個段落顯示li類的名稱來代替圖像，但我想專注於隱藏圖像。

我已經搞砸了一段時間了，即使在查看與此相關的其他帖子之后，我似乎無法弄清楚出了什么問題。

<ul id="language">
    <li class="a"><img src="img/a.png" alt="a"></li>
    <li class="b"><img src="img/b.png" alt="b"></li>
</ul>
<script src="//code.jquery.com/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="nameDisplay.js" type = "text/javascript" charset="utf-8"></script>

在nameDisplay.js中

$('#language li').hover(function(){
    $(this 'img').hide();
}, function(){
    $(this 'img').show();
});

Answer 1

只需使用css，無需使用jQuery

#language li:hover img{
    display: none;
}

Answer 2

 $(function() { $('#language li').hover(function() { $('img', this).hide(); // You can either of these // $(this).find('img') // $(this).children('img') }, function() { $('img', this).show(); }); }); 

 <script src="//code.jquery.com/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <ul id="language"> <li class="a"> <img src="img/a.png" alt="a"> </li> <li class="b"> <img src="img/b.png" alt="b"> </li> </ul> 

您找到圖像的選擇器不正確。 您可以使用上下文選擇器或.find()或children()方法

$(function() {
    $('#language li').hover(function(){
        $('img', this).hide();
        // You can either of these 
        // $(this).find('img') 
        // $(this).children('img') 
    }, function(){
        $('img', this).show();
    });
});