html - Changing a color when hovering -
i working on exam html/css, , have question - we're supposed make website fonts, , want have index page want have 1 of fonts showcased
r/r roboto
and font colored in white, while seperator colored in blue color, want seperator turn white, while rest of text turns blue.
for have this:
a:hover { color: #00ebff; transition: }
<a href="roboto.html"> <h1>r<span style="color: #00ebff" class="spacer">/</span>r</h1> <h2>roboto</h2> </a>
and cant life of me figure out how it.
you're along right line, need more specific in selector separator element. following css should achieve need:
a:hover { color: #00ebff; } a:hover span.spacer { color: #fff !important; }
please note using !important
rule here essential, since you're using inline styles. however, better define style .spacer
in css file too:
a .spacer { color: #00ebff } a:hover { color: #00ebff; } a:hover .spacer { color: #fff; }
<a href="roboto.html"> <h1>r<span class="spacer">/</span>r</h1> <h2>roboto</h2> </a>
Comments
Post a Comment