fade out everything but hovered link is not working in Chrome - html

Question

I use this hover-effect, where everything but the hovered Element fades out, you can see it in the snippet below.
Its working in Firefox (Version 66.0.3 ) but not in Chrome (Version 73.0.3683.103). I also tried Microsoft Edge, it works there aswell.
I tried adding "-webkit-" because I read, that this could fix the problem, but it didn´t.
Anybody an idea how to achieve this hover-effect in Chrome?
.links{
font-weight: bold;
font-size: 20px;
}
/* Hover Effect */
.hover {
visibility: hidden;
}
.hover > * {
visibility: visible;
transition: opacity 100ms linear 100ms;
}
.hover:hover > * {
opacity: 0.3;
}
.hover > *:hover {
opacity: 1;
transition-delay: 0ms, 0ms;
}
EDIT:
It works in Chrome, if I remove the links (in my case references to other pages of the website).
Working in Chrome:
.links {
font-weight: bold;
font-size: 20px;
}
/* Hover Effect */
.hover {
visibility: hidden;
}
.hover>* {
visibility: visible;
transition: opacity 100ms linear 100ms;
}
.hover:hover>* {
opacity: 0.3;
}
.hover>*:hover {
opacity: 1;
transition-delay: 0ms, 0ms;
}
<div class="links">
<div class="hover">
<div class="linkNav">1</div>
<div class="linkNav">2</div>
<div class="linkNav">3</div>
</div>
</div>
Not Working in Chrome:
.links {
font-weight: bold;
font-size: 20px;
}
/* Hover Effect */
.hover {
visibility: hidden;
}
.hover>* {
visibility: visible;
transition: opacity 100ms linear 100ms;
}
.hover:hover>* {
opacity: 0.3;
}
.hover>*:hover {
opacity: 1;
transition-delay: 0ms, 0ms;
}
<div class="links">
<div class="hover">
<a href="1.html">
<div class="linkNav">1</div>
</a>
<a href="2.html">
<div class="linkNav">2</div>
</a>
<a href="3.html">
<div class="linkNav">3</div>
</a>
</div>
</div>

Answer 1

(N.b. I have updated this answer after noting the problem with the HTML).
I simplified your CSS to try and isolate the problem (I removed the visibility properties that aren't doing anything as well as the > * selectors)
It's unsurprising there is unpredictable behaviour in this case because strictly speaking you shouldn't be putting a block level element such as <div> inside an <a> element.
It seems that, in this case of malformed HTML, Chrome won't recognise the opacity value of the anchor (<a>) tag unless I do something like set it to display: block or display:inline-block. FireFox, Edge and IE do recognise the opacity regardless.
The best solution would be to fix your HTML so that the block level elements wrap the inline elements properly.
.links {
font-weight: bold;
font-size: 20px;
}
.hover:hover a {
opacity: 0.3;
}
.hover a:hover {
opacity: 1;
}
<div class="links hover">
<div class="linkNav">1</div>
<div class="linkNav">2</div>
<div class="linkNav">3</div>
</div>
I would recommend fixing it like this but if for some reason you can't fix the HTM a workaround is to set the display property on your anchor tags. Like so:
.links {
font-weight: bold;
font-size: 20px;
}
.links a {
display:block;
}
.hover:hover a {
opacity: 0.3;
}
.hover a:hover {
opacity: 1;
}
<div class="links hover">
<div class="linkNav">1</div>
<div class="linkNav">2</div>
<div class="linkNav">3</div>
</div>
Or else an alternative solution is you could simply target an alternative element, such as the inner div instead of the a tag.
JSFiddle links for the different workaround solutions and the original CVE that demonstrates the issue (useful for testing in different browsers):
Solution by setting display block
Solution by changing selector to target inner div
Original CVE which works in most browsers but not Chrome

Answer 2

I have corrected the code
the problem here was in the ordering you were adding HTML
The a tag has div inside it and class on that which the selector on hover was unable to reach to.
Now see, it works fine.
This is it I guess.
Hope it solves your problem.
.links {
font-weight: bold;
font-size: 20px;
}
/* Hover Effect */
.hover {
visibility: hidden;
}
.hover>* {
visibility: visible;
transition: opacity 100ms linear 100ms;
}
.hover:hover>* {
opacity: 0.3;
}
.hover>*:hover {
opacity: 1;
transition-delay: 0ms, 0ms;
}
<div class="links">
<div class="hover">
1
2
3
</div>
</div>