Hover, removeclass First Element and add other Element

Question

I am trying to create a function that always the first Element receives a class = "actived"

this class has a css style that marks the element in question

I have a list of 4 lines and in them I want the first to receive this class by default and the other 3 when I hover receive this class = "actived"

at the same time remove the class from the first element, as soon as I remove the mouse from the top the first element returns to receive class = "actived" by default

This image shows the first element with class = "actived" getting by defaul This image shows when I hover over other lists, removing the class from the first element

 $(".news-list li").hover( function () { $(this).addClass('actived') }, function () { $(this).removeClass('actived') if ($(this).hasClass == "") { $(".news-list li").first().removeClass('actived') } }, )

 ul.news-list { max-width: 595px; margin: 0 auto; } /* Todos elementos no li centralizandos */ .news-list li { height: 47px; display: flex; align-items: center; font-size: 13px; font-weight: 600; border-bottom: 1px solid #38353a; transition: none; position: relative; z-index: 2; } /* Ao passar o mouse, mostre */ .news-list li.actived::before{ border: 1px solid #38353b; background-color: #27242b; width: 630px; height: 50px; position: absolute; bottom: -1px; left: -17px; z-index: -1; -webkit-box-shadow: 0px 20px 20px -19px rgba(0,0,0,0.75); -moz-box-shadow: 0px 20px 20px -19px rgba(0,0,0,0.75); box-shadow: 0px 20px 20px -19px rgba(0,0,0,0.75); content: ''; } /* Titulo linkavel da noticia*/ .news-list li a { color: #fff; } /* posicionando botão ler mais */ .news-list li .wrap-btn { display: flex; flex-grow: 3; justify-content: flex-end; visibility: hidden; } /* ao passar o mouse mostre me o botão vermelho*/ .news-list li:hover .wrap-btn { visibility: visible; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="news-list"> <li class="actived"> <a href="#">Participe de nosso grupo no whatsapp </a>&nbsp;-&nbsp; <span>00 / 00 / 00</span> <div class="wrap-btn"> <a class="btn-red read-more" href="#">Ler mais</a> </div> </li> <li> <a href="#">Não perca, castle siege todos os domingos</a>&nbsp;-&nbsp; <span>00 / 00 / 00</span> <div class="wrap-btn"> <a class="btn-red read-more" href="#">Ler mais</a> </div> </li> <li> <a href="#">Promoção dia dos pais, a proveite a vontagem</a>&nbsp;-&nbsp; <span>00 / 00 / 00</span> <div class="wrap-btn"> <a class="btn-red read-more" href="#">Ler mais</a> </div> </li> <li> <a href="#">Sapien gravida conubia orci varius faucibus</a>&nbsp;-&nbsp; <span>00 / 00 / 00</span> <div class="wrap-btn"> <a class="btn-red read-more" href="#">Ler mais</a> </div> </li> </ul>

Answer 1

You can do it without any JavaScript by using :hover in your CSS Selectors

 ul.news-list { max-width: 595px; margin: 0 auto; } /* Todos elementos no li centralizandos */ .news-list li { height: 47px; display: flex; align-items: center; font-size: 13px; font-weight: 600; border-bottom: 1px solid #38353a; transition: none; position: relative; z-index: 2; } /* Ao passar o mouse, mostre */ .news-list:hover li:hover::before, .news-list:hover li.actived:hover::before, .news-list li.actived::before{ border: 1px solid #38353b; background-color: #27242b; width: 630px; height: 50px; position: absolute; display: block; bottom: -1px; left: -17px; z-index: -1; -webkit-box-shadow: 0px 20px 20px -19px rgba(0,0,0,0.75); -moz-box-shadow: 0px 20px 20px -19px rgba(0,0,0,0.75); box-shadow: 0px 20px 20px -19px rgba(0,0,0,0.75); content: ''; } .news-list:hover li.actived::before { display:none; } /* Titulo linkavel da noticia*/ .news-list li a { color: #fff; } /* posicionando botão ler mais */ .news-list li .wrap-btn { display: flex; flex-grow: 3; justify-content: flex-end; visibility: hidden; } /* ao passar o mouse mostre me o botão vermelho*/ .news-list li:hover .wrap-btn { visibility: visible; }

 <ul class="news-list"> <li class="actived"> <a href="#">Participe de nosso grupo no whatsapp </a>&nbsp;-&nbsp; <span>00 / 00 / 00</span> <div class="wrap-btn"> <a class="btn-red read-more" href="#">Ler mais</a> </div> </li> <li> <a href="#">Não perca, castle siege todos os domingos</a>&nbsp;-&nbsp; <span>00 / 00 / 00</span> <div class="wrap-btn"> <a class="btn-red read-more" href="#">Ler mais</a> </div> </li> <li> <a href="#">Promoção dia dos pais, a proveite a vontagem</a>&nbsp;-&nbsp; <span>00 / 00 / 00</span> <div class="wrap-btn"> <a class="btn-red read-more" href="#">Ler mais</a> </div> </li> <li> <a href="#">Sapien gravida conubia orci varius faucibus</a>&nbsp;-&nbsp; <span>00 / 00 / 00</span> <div class="wrap-btn"> <a class="btn-red read-more" href="#">Ler mais</a> </div> </li> </ul>

If you really want a JavaScript solution

var selected = null;
$(".news-list li").hover(
  function() {
     selected = $('.news-list li.actived').removeClass('actived');
     $(this).addClass('actived');
  },
  function() {
      $(".news-list li").removeClass('actived');
      selected.addClass('actived');
  }
);

Answer 2

You are just making your hover function too complicated.

If you want the last hovered element to stay active when it is no longer hovered over, you don't need anything to happen on the mouseout event - you can remove the second function from the hover handler for that event.

To leave the highlight on the last hovered element:

On the hover event: remove the actived class from all elements it might be on (no need to check which first because it doesn't matter!) add it to the currently hovered element

    $(".news-list li").hover(
      function() {
          $(".news-list li").removeClass('actived')
        $(this).addClass('actived')
      }
    )

To leave no element highlighted on mouseout:

As above, and add $(".news-list li").removeClass('actived') to the mouseout function to remove it from all elements:

$(".news-list li").hover(
  function() {
    $(".news-list li").removeClass('actived')
    $(this).addClass('actived')
  },
  function() {
      $(".news-list li").removeClass('actived')
  },
)

To return the highlight to the first element on mouseout:

As above, except om mouseout, add the actived class back to the first element:

$(".news-list li").hover(
  function() {
     // Remove from all elements and add to the current element
     $(".news-list li").removeClass('actived')
     $(this).addClass('actived')
  },
  function() {
     // Remove from all elements and add to the first element
     $(".news-list li").removeClass('actived')
     $(".news-list li").first().addClass('actived')
  },
)

Working Example:

 $(".news-list li").hover( function() { // Remove from all elements and add to the current element $(".news-list li").removeClass('actived') $(this).addClass('actived') }, function() { // Remove from all elements and add to the first element $(".news-list li").removeClass('actived') $(".news-list li").first().addClass('actived') }, )

 ul.news-list { max-width: 595px; margin: 0 auto; } /* Todos elementos no li centralizandos */ .news-list li { height: 47px; display: flex; align-items: center; font-size: 13px; font-weight: 600; border-bottom: 1px solid #38353a; transition: none; position: relative; z-index: 2; } /* Ao passar o mouse, mostre */ .news-list li.actived::before { border: 1px solid #38353b; background-color: #27242b; width: 630px; height: 50px; position: absolute; bottom: -1px; left: -17px; z-index: -1; -webkit-box-shadow: 0px 20px 20px -19px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 20px 20px -19px rgba(0, 0, 0, 0.75); box-shadow: 0px 20px 20px -19px rgba(0, 0, 0, 0.75); content: ''; } /* Titulo linkavel da noticia*/ .news-list li a { color: #fff; } /* posicionando botão ler mais */ .news-list li .wrap-btn { display: flex; flex-grow: 3; justify-content: flex-end; visibility: hidden; } /* ao passar o mouse mostre me o botão vermelho*/ .news-list li:hover .wrap-btn { visibility: visible; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="news-list"> <li class="actived"> <a href="#">Participe de nosso grupo no whatsapp </a>&nbsp;-&nbsp; <span>00 / 00 / 00</span> <div class="wrap-btn"> <a class="btn-red read-more" href="#">Ler mais</a> </div> </li> <li> <a href="#">Não perca, castle siege todos os domingos</a>&nbsp;-&nbsp; <span>00 / 00 / 00</span> <div class="wrap-btn"> <a class="btn-red read-more" href="#">Ler mais</a> </div> </li> <li> <a href="#">Promoção dia dos pais, a proveite a vontagem</a>&nbsp;-&nbsp; <span>00 / 00 / 00</span> <div class="wrap-btn"> <a class="btn-red read-more" href="#">Ler mais</a> </div> </li> <li> <a href="#">Sapien gravida conubia orci varius faucibus</a>&nbsp;-&nbsp; <span>00 / 00 / 00</span> <div class="wrap-btn"> <a class="btn-red read-more" href="#">Ler mais</a> </div> </li> </ul>