HTML CSS examples for CSS Widget:Hover to change Color
Hover to change paragraph background
<html lang="en"> <head> <style> .container__inner__paragraph {<!--from ww w .jav a 2 s . co m--> color:Chartreuse; background:black; display:inline-block; padding:5rem; } .container__inner__paragraph:hover { background:yellow; } .container__inner__paragraph:hover .container__inner__paragraph__highlight { color:blue; } .container__inner__paragraph__highlight { text-transform:uppercase; font-weight:701; } </style> </head> <body translate="no"> <div class="container"> <div class="container__inner"> <p class="container__inner__paragraph">Lorem ipsum <span class="container__inner__paragraph__highlight">Lorem</span> </p> </div> </div> </body> </html>