CODEWITHSUNDEEP
htmlcssgoogle-chrome
user11346382
user11346382

Reputation: 49

fade out everything but hovered link is not working in Chrome

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>

Upvotes: 3

Views: 147

Answers (2)

ChrisM
ChrisM

Reputation: 1672

(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"><a href="1.html">1</a></div>
  <div class="linkNav"><a href="2.html">2</a></div>
  <div class="linkNav"><a href="3.html">3</a></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">
    <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>

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

Upvotes: 2

Joykal Infotech
Joykal Infotech

Reputation: 1876

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">
    <a href="1.html" class="linkNav">1</a>
    <a href="2.html" class="linkNav">2</a>
    <a href="3.html" class="linkNav">3</a>
  </div>
</div>

Upvotes: 1

Related Questions