Hover to change paragraph background - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover to change Color

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Hover to change Color

Description

Hover to change paragraph background

Demo Code

ResultView the demo in separate window 

<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>

Related Tutorials