I am attempting to develop a function that adds the class = "actived" to the first Element.
This class has a CSS style that highlights the element in question.
I have a list of 4 lines and I want the first one to automatically receive this class, while the other 3 receive it when hovered over.
Simultaneously, remove the class from the first element as soon as the mouse is removed. When the mouse is away, the first element should revert back to receiving the class = "actived" by default.
In this image, the first element with class = "actived" is displayed by default This image demonstrates how hovering over other lists removes 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;
}
/* All elements within li centered */
.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;
}
/* On hover, show */
.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: '';
}
/* Clickable news title */
.news-list li a {
color: #fff;
}
/* Position read more button */
.news-list li .wrap-btn {
display: flex;
flex-grow: 3;
justify-content: flex-end;
visibility: hidden;
}
/* Show red button on hover */
.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="#">Join our WhatsApp group</a> -
<span>00 / 00 / 00</span>
<div class="wrap-btn">
<a class="btn-red read-more" href="#">Read more</a>
</div>
</li>
<li>
<a href="#">Don't miss out, castle siege every Sunday</a> -
<span>00 / 00 / 00</span>
<div class="wrap-btn">
<a class="btn-red read-more" href="#">Read more</a>
</div>
</li>
<li>
<a href="#">Father's Day promotion, take advantage now</a> -
<span>00 / 00 / 00</span>
<div class="wrap-btn">
<a class="btn-red read-more" href="#">Read more</a>
</div>
</li>
<li>
<a href="#">Sapien gravida conubia orci varius faucibus</a> -
<span>00 / 00 / 00</span>
<div class="wrap-btn">
<a class="btn-red read-more" href="#">Read more</a>
</div>
</li>
</ul>