jQuery mouseenter mouseleave 悬停错误

Question

我正在尝试通过切换“活动”类对我的 LI 元素应用不透明度更改，但鼠标事件或悬停都不起作用。看起来像一个简单的修复，但我不知道为什么。

jquery

$( document ).ready(function() {
  $('nav.li').mouseenter(function() {
    $(this).addClass("active");
  });

  $('nav.li').mouseleave(function() {
    $(this).removeClass("active");
  });

  $("nav.li").hover(function () {
    $(this).toggleClass("active");
  });
});

css

nav.li.active {
  opacity: .7;
}

html

<nav>
  <ul>
    <li class="about_link">...</li>
    <li class="contact_link">...</li>
    <li>...</li>
  </ul>
</nav>

谢谢

Answer 1

JavaScript：

从以下位置更改您的选择器：

$('nav.li')

到：

$('nav li')

目前，您的选择器定位到一个类为 li 的 <nav> 元素。我认为您想定位 <nav> 元素内的 <li> 元素。

您也可以通过将调用链接在一起来优化您的 jQuery：

// Shorthand document ready...
$(function () {
    $('nav li').on('mouseenter', function() {
        $(this).addClass("active");
    }).on('mouseleave', function() {
        $(this).removeClass("active");
  });
});

CSS：

您也需要相应地修改您的 CSS：

nav li.active {
    opacity: 0.7;
}

您可能需要考虑将其扩展为包括供应商前缀以实现最大兼容性：

nav li.active {
    /* IE 8 - 9 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";

    /* IE 5, 6, 7, 8, 9 */
    filter: alpha(opacity=70);

    /* Older than Firefox 0.9 */
    -moz-opacity:0.7;

    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 0.7;

    /* Modern!
     * Firefox 0.9+, Safari 2?, Chrome any, Opera 9+, IE 9+ 
     */
    opacity: 0.7;
}

Opacity Reference Guide

Answer 2

你不需要nav和li之间的.，所以你可以改变：

$('nav.li')

到：

$('nav li')

最终代码如下：

$( document ).ready(function() {
    $("nav li").hover(function () {
        $(this).toggleClass("active");
    });
});

您当前的选择器$('nav.li') 将<nav> 元素与li 类匹配。您还需要将您的 css 更改为：

nav li.active {
    opacity: .7;
}

Fiddle Demo