Question

我试图通过切换“活跃”元素来对我的LI元素应用不透明度更改。 class，但鼠标事件或悬停都不起作用。看起来像一个简单的修复，但我无法弄清楚原因。

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>元素。我想你想要定位<li>元素中的<nav>元素。

您也可以通过将调用链接在一起来优化您的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

jQuery mouseenter mouseleave悬停bug

2 个答案: