列表项的活动悬停效果

Question

I have a hover effect on all my list items and active hover effect on my top list item "testimonials". 我对所有列表项都具有悬停效果，而对我的顶部列表项“推荐”具有活跃的悬停效果。 I would like the active hover effect on "testimonials" to de-activate when hovering over the other list items. 我希望当悬停在其他列表项上时，对“推荐”的主动悬停效果将被停用。 this way only one hover effect will be active at one time but the default "testimonials" link will always be active if no other hover is in effect. 这样，一次只会激活一个悬停效果，但是如果没有其他悬停效果，则默认的“推荐”链接将始终处于活动状态。

I understand this may require some jquery? 我了解这可能需要一些jquery？ Any and all help would be greatly appreciated. 任何和所有帮助将不胜感激。

here is my code, HTML: 这是我的代码，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>

CSS: CSS：

body
{
  margin: 0;
  padding: 0;
  font-family: 'Comfortaa', cursive;
}
.wrapper
{
  position: fixed;
  width: 50%;
  height: 100vh;
  padding-left: 40px;
  padding-right: 40px;
  background: #fff;
}
.wrapper ul
{
position: absolute;
top: 20%;
left: 23%;
right: 10%;
}
.wrapper ul li
{
  list-style: none;
  margin-top: 10%;
}
.wrapper ul li a
{
  text-decoration: none;
  color: #011933;
}
.wrapper ul li a:hover
{
  text-decoration: none;
}
.wrapper ul li a h1
{
  font-size: 28px;
}
.wrapper ul li a h1:hover
{
  font-size: 28px;
  color: #8a6b0c;
}
.wrapper .testimonials
{
  color: #8a6b0c;
}
.wrapper ul li a h2
{
  font-size: 14px;
  margin-left: 20px;
  opacity: .6;

}
.wrapper ul li a h1, h2
{
  width: 50%;
  height: 60px;
  padding: 0;
  display: inline;
}

Answer 1

Instead of setting the color on the .testimonials class, you could change this to be an ' active ' class and have it work on the element and childs (in this case the text). 不必在.testimonials类上设置颜色，您可以将其更改为“ active ”类，并使它在元素和子元素（在本例中为文本）上起作用。 Then use jQuery/JavaScript to control the toggling of the active class. 然后使用jQuery / JavaScript控制活动类的切换。

So I've done this to the CSS: 所以我对CSS完成了此操作：

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

Instead of: 代替：

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

And then controlling the toggling with jQuery like so: 然后像这样控制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');
    }
  }
);

And I also added the active class into the HTML on the testimonials element: 并且我还将active类添加到了testimonials元素的HTML中：

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

Working fiddle: http://jsfiddle.net/f9pqsd8v/10/ 工作提琴： http : //jsfiddle.net/f9pqsd8v/10/

列表项的活动悬停效果

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-07-12 20:47:28

列表项的活动悬停效果

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-07-12 20:47:28

解决方案1
0 已采纳 2018-07-12 20:47:28