Question

当鼠标悬停在元素上并显示鼠标离开元素时，尝试在img中隐藏li。我后来想要一个段落显示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

＆＃13;

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

＆＃13;

<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>

＆＃13;

找到图像的选择器不正确。您可以使用上下文选择器或.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();
    });
});

使用jQuery悬停使图像消失

2 个答案: