List item active hover effect

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? Any and all help would be greatly appreciated.

here is my code, 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

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). Then use jQuery/JavaScript to control the toggling of the active class.

So I've done this to the CSS:

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

Instead of:

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

And then controlling the toggling with jQuery like so:

$( "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:

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

Working fiddle: http://jsfiddle.net/f9pqsd8v/10/

List item active hover effect

Question

1 answers

solution1
0 ACCPTED 2018-07-12 20:47:28

List item active hover effect

Question

1 answers

solution1 0 ACCPTED 2018-07-12 20:47:28

solution1
0 ACCPTED 2018-07-12 20:47:28