jQuery悬停功能不起作用

Question

我试图这样做，一个简单的悬停功能。

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

但这不起作用。

Answer 1

假设您的HTML代码如下所示：

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

然后，您可以使用以下查询代码段来显示和隐藏元素li.liEspecial：

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

Answer 2

我们没有display: normal;。 li的默认display为list-item。试试这段代码：

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

jsfiddle