列表項的活動懸停效果

Question

我對所有列表項都具有懸停效果，而對我的頂部列表項“推薦”具有活躍的懸停效果。 我希望當懸停在其他列表項上時，對“推薦”的主動懸停效果將被停用。 這樣，一次只會激活一個懸停效果，但是如果沒有其他懸停效果，則默認的“推薦”鏈接將始終處於活動狀態。

我了解這可能需要一些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>

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

不必在.testimonials類上設置顏色，您可以將其更改為“ active ”類，並使它在元素和子元素（在本例中為文本）上起作用。 然后使用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');
    }
  }
);

並且我還將active類添加到了testimonials元素的HTML中：

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

工作提琴： 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