CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-hover
asdkhalifa
asdkhalifa

Reputation: 35

Make an image in an li disappear with hover using jQuery

Trying to make an img in a li to hide when mouse hovers over element and to show once mouse leaves element. I later want to have a paragraph display the name of the li class in place of the image but I want to focus on the image hiding for now.

I've been messing with this for a while and I can't seem to figure out what is wrong even after looking at other posts related to this.

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

In nameDisplay.js

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

Upvotes: 4

Views: 980

Answers (2)

Satpal
Satpal

Reputation: 133403

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

Your selector to find image is incorrect. You can use context selector or .find() or children() method

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

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

Just use css, no need to use jQuery

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

Upvotes: 3

Related Questions