css - .class a:hover vs .class:hover a -
couldn't find answer i've been wondering about.
is there difference between .class2 a:hover {}
, .class2:hover {}
? or preference 1 on other?
i've been using .class2 a:hover {}
alter anchors on anchor hover (ie: anchor text color), when wanted alter div held anchor (ie: anchor color , div background-color both change on hover), had use .class2:hover {}
work. in doing so, got confused difference because between 2 written similarly.
thanks!
edit
edited question more clear. untwisting brain :)
my understanding this:
.class2 a:hover
target hyperlink tags within .class2
elements when a
tags hovered.
.class2:hover a
target hyperlink a
tags within .class2
elements when .class2
hovered.
the distinction element hover in order change styling rules.
example:
.box{ background: red; width: 50px; height: 50px; margin-bottom: 10px; } .case1 a:hover { background: blue; } .case2:hover { background: green; }
<html> <body> <div class="box case1"><a href="#">case 1</a></div> <div class="box case2"><a href="#">case 2</a></div> </body> </html>
in case, want hover .class2
element or a
?
Comments
Post a Comment