I have a variety of elements that are almost working how I want them to.
There are four divs in total. Depending on the URL visited, I want a specific div to be fully transparent/active. The next div in line should animate in and out of transparency simultaneously, encouraging the viewer to navigate to the next page. Additionally, there is a hover state so that when any of the divs are hovered over, that particular one should become fully transparent too.
I'm running into some confusion when trying to prioritize the hover state rule. When any div is hovered over, I want all other animations to stop, the hovered div to become fully opaque, and the remaining 3 divs to fade to half opacity, regardless of the current page.
Below is my code, feel free to ask if you have any questions. Thank you! You can also view a demo on CodePen: https://codepen.io/summeropratt/pen/LYpoVYg
HTML
<div class="parent">
<div class="child div1">
<h2>Div 1</h2>
</div>
<div class="child div2">
<h2>Div 2</h2>
</div>
<div class="child div3">
<h2>Div 3</h2>
</div>
<div class="child div4">
<h2>Div 4</h2>
</div>
</div>
CSS
.child {
opacity: .5;
transition: .2s;
}
.full-transparency {
opacity: 1 !important;
cursor: pointer !important;
}
.click-me-next {
animation-name: click-me-next;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-delay: 0;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
@keyframes click-me-next{
0% {
opacity: .5;
}
100% {
opacity: 1;
}
}
JS
// if(window.location.pathname == '/div3-url/') {
var opacity = $(".div3").css("opacity");
console.log("opacity", opacity);
$(".div3").css("opacity", 1);
var div4 = document.getElementsByClassName("div4")[0];
div4.classList.add("click-me-next");
// });
$(".child").hover(function() {
$(this).addClass("full-transparency");
}, function() {
$(this).removeClass("full-transparency");
});