CODEWITHSUNDEEP
jqueryhtml
aleS
aleS

Reputation: 1

jQuery hover function doesn't work

Im trying to do this, a simple hover function.

HTML:

<ul class="ulComprar">
  <li class="liEspecial"><p>Hello!</p><li>
</ul>

jQuery:

$('.ulComprar').hover(function () {
  $('li.liEspecial').css("display", "normal"), function () {
    $('li.liEspecial').css("display", "none");
  }
});

CSS:

.ulComprar {    
    display: inline-block; 
    list-style: none;
    font-style: oblique; 
    font: bold; 
    font-family: Calibri; 
    font-size: 14px;
}

li.liEspecial {
     display: none;
}

But this doesn't work.

Upvotes: 0

Views: 66

Answers (2)

Mohamad Shiralizadeh
Mohamad Shiralizadeh

Reputation: 8765

we don't have display: normal;. the default display for li is list-item. try this code:

$('.ulComprar').on('mouseenter', function () {
    $('.liEspecial').css("display", "list-item");
}).on('mouseleave', function () {
    $('.liEspecial').css("display", "none");
});

jsfiddle

Upvotes: 0

Jorge
Jorge

Reputation: 227

Assuming your HTML code looks something like this:

<ul class="ulComprar">
  <li>Milk</li>
  <li class="liEspecial">Eggs</li>
  <li>Bread</li>
</ul>

Then you could use the following query snippet to show and hide element li.liEspecial:

$('.ulComprar').hover(
  function() {
    $('.liEspecial', this).hide();    // hides li on mouse enter
  }, function() {
    $('.liEspecial', this).show();    // shows li on mouse leave
  }
);

Upvotes: 2

Related Questions