html - CSS - Using Hover on elements inside a tag? -
i want use hover couple divs inside tag.
for example here
<a href="#"> <div class="nextmatch_wrap"> <div class="clan12w"> <div class="teamlogos"> <div class="team" id="teamcontainer"> <img src="#"> </div> </div> </div> <div class="clan12w"> <div class="teamlogos"> <div class="team" id="teamcontainer"> <img src="#"> </div> </div> </div> </div>
if hover on tag want colored border appear on "teamcontainer" , "teamlogos"
i'm not css have tried
a nextmatch_wrap, :hover #teamcontainer, nextmatch_wrap, :hover .r-home-team{ border:solid 1px #25c2f5; }
it works somehow hover on when mouse on anywhere in page when move mouse out of browser page hover goes away, idea?
your selector not correct , <a>
tag not closed. >
in selector means apply effect on <a>
when hovered , <a>
followed <div>
.
here can do.
a:hover > div { border:solid 1px #25c2f5; }
<a href="#"> <div class="nextmatch_wrap"> <div class="clan12w"> <div class="teamlogos"> <div class="team" id="teamcontainer"> <img src="http://placehold.it/100x100" /> </div> </div> </div> <div class="clan12w"> <div class="teamlogos"> <div class="team" id="teamcontainer"> <img src="http://placehold.it/100x100" /> </div> </div> </div> </div> </a>
Comments
Post a Comment