CODEWITHSUNDEEP
cssgoogle-chromehover
user3180931
user3180931

Reputation: 87

CSS Hover div affect other div won't work on google chrome

i creating a website and I have problem with hover effect. I have 3 div elements on start page, I want to make transparent two other div's when hovering a one of this three div's. In Mozilla Firefox everything works excellent, but on Google Chrome it won't work (any element doesn't apply opacity). This is website on temporary address - http://letsdrink.fm4.pl/

This is my code for hovering this elements:

#center:hover a {
    opacity:0.2;
}

#center:hover a:hover {
    opacity:1;
}
#center:hover a:hover .start-element-more {
    background:#8f1fe7;
}

And part of code 

<div id="center">
<a href="Serwis-Kawowy">
<div id="start-element">Serwis kawowy
<div class="start-element-more">+ czytaj więcej</div>
</div></a> 
<a href="Obsluga-Barmanska">
<div id="start-element2">
Obsluga Barmanska
<div class="start-element-more">+ czytaj więcej</div>
</div></a> 
<a href="Kursy-Szkolenia">
<div id="start-element3">Kursy i szkolenia
<div class="start-element-more">+ czytaj więcej</div>
</div></a>
</div>

You can check this on firefox and chrome - on firefox everything works well.

Upvotes: 2

Views: 1283

Answers (2)

hansn
hansn

Reputation: 2024

#center:hover a,
#center:hover a >div {
    opacity: 0.2;
}
#center:hover a:hover,
#center:hover a > div:hover {
    opacity: 1;
}

Upvotes: 1

Daniel Cheung
Daniel Cheung

Reputation: 4819

Your Fix:

#center:hover a,
#center:hover a > div {
    opacity:0.2;
}

Upvotes: 1

Related Questions