Javascript 列表项活动悬停效果_Javascript_Jquery_Html_Css_Hover

Javascript 列表项活动悬停效果

javascript jquery html css

Javascript 列表项活动悬停效果,javascript,jquery,html,css,hover,Javascript,Jquery,Html,Css,Hover,我的所有列表项都有一个悬停效果，而我的顶级列表项“推荐”则有一个活动悬停效果。我希望当鼠标悬停在其他列表项上时，“推荐”上的活动悬停效果取消激活。这样，一次只能激活一个悬停效果，但如果没有其他悬停效果，则默认的“推荐”链接将始终处于活动状态我知道这可能需要一些jquery？我们将非常感谢您的任何帮助这是我的代码，HTML： <!DOCTYPE html> <html> <head> <title>Test</title> &

我的所有列表项都有一个悬停效果，而我的顶级列表项“推荐”则有一个活动悬停效果。我希望当鼠标悬停在其他列表项上时，“推荐”上的活动悬停效果取消激活。这样，一次只能激活一个悬停效果，但如果没有其他悬停效果，则默认的“推荐”链接将始终处于活动状态

我知道这可能需要一些jquery？我们将非常感谢您的任何帮助

这是我的代码，HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
</head>
<body>
<div class="wrapper">
  <ul>
    <li>
      <a class="testimonials" href="#">
        <h1>testimonials</h1>
        <h2>We love our</h2>
        <div class="selector"><img scr="img/logo.png"></img></div>
      </a>
    </li>
    <li>
      <a class="instructions" href="#">
        <h1>instructions</h1>
        <h2>For your information</h2>
      </a>
    </li>
    <li>
      <a class="Benefits" href="#">
        <h1>benefits</h1>
        <h2>A choice</h2>
      </a>
    </li>
    <li>
      <a class="Top-Recipe" href="#">
        <h1>top</h1>
        <h2>Recommendation</h2>
      </a>
    </li>
    <li>
      <a class="Affiliations" href="#">
        <h1>affiliations</h1>
        <h2>Valued Retailers</h2>
      </a>
    </li>
  </ul>
  </div>
  </body>
  </html>

您可以将该类更改为“

活动”

”类，并使其在元素和子类（在本例中为文本）上工作，而不是在.essentials类上设置颜色。然后使用jQuery/JavaScript控制活动类的切换

所以我对CSS做了如下处理：

.wrapper .active *
{
  color: #8a6b0c;
}

而不是：

.wrapper .testimonials
{
  color: #8a6b0c;
}

然后用jQuery控制切换，如下所示：

$( "li" ).hover(
  function() {

        if ($('.testimonials')[0].classList.contains('active')) {
            $('.testimonials').toggleClass('active');
      }

    $( this ).toggleClass('active');
  },
  function() {
    $( this ).toggleClass('active');

    if (!$('.testimonials')[0].classList.contains('active')) {
      $('.testimonials').addClass('active');
    }
  }
);

我还将活动类添加到HTML中的推荐元素中：

 <a class="testimonials active" href="#">

太好了，这正是我想要达到的效果。谢谢
 <a class="testimonials active" href="#">