html - alter css on another div not working as it is not in the same element -
#match1
not change when hover on #id1
? worked when both in same div element on page stops working when #id1
inside div.
i want use css no javascript please!
html
<div> <div id="id1">div</div> <div id="id2">div</div> <div id="id3">div</div> </div> <div id="match1">a </div> <div id="match2">b </div> <div id="match3">c </div>
css
#id1:hover ~ #match3 { color: red; font-weight:bold; font-size:40px; }
you using preceding selector
the preceding selector targets precedent element same parent 1 of target , if want target match3 div being preceed id1 markup should follows
<div> <div id="id1">div</div> <div id="id2">div</div> <div id="id3">div</div> <div id="match1">a </div> <div id="match2">b </div> <div id="match3">c </div> </div>
but... in spite of that, if looking target both (match3 & id1) when hover id1, wont able without javascript
this because have single subject , targeted right simple selector in selector chain.
#id1:hover ~ #match3 { color: red; font-weight:bold; font-size:40px; }
Comments
Post a Comment