Changing DIV Backgound Color When Another DIV is Hovered Using CSS Only

[dashmahmood]

In this tutorial you will learn how to change div background when another div is hovered.
I used this "~" symbol in CSS to perform changing div color when another div is hovered.
The "~" symbol means that it will only select the first element that is immediately preceded
by the former selector. Copy and apply the code bellow.

Creating Our HTML Display

The code bellow provide the visual display of our demo. Copy the code bellow and save it as "index.hml".

1. <
   
   html>
   
2. <
   
   head>
   
3. <
   
   title>
   
   Css Tutorial</
   
   title>
   
4. <
   
   link
   
   rel=
   
   "stylesheet"
   
   href=
   
   "style.css"
   
   media=
   
   "screen"
   
   >
   
5. </
   
   head>
   
6. <
   
   body>
   
7. <
   
   div id=
   
   "triger"
   
   >
   
8. Hover Me
   
9. </
   
   div>
   
10. <
    
    div id=
    
    "result"
    
    >
    
11. Results Goes Here
    
12. </
    
    div>
    
13. </
    
    body>
    
14. </
    
    html>
    

Creating Our CSS styles

This code will change our div background when the other div is hovered, you can also view here on how to use "~" symbol. Copy the code bellow and save it as "style.css".

1. #triger {
   
2. padding:
   
   5px;
   
3. cursor:
   
   pointer;
   
4. width:
   
   100px;
   
5. float:
   
   left;
   
6. }
   
7. #result {
   
8. padding:
   
   10px;
   
9. color:
   
   red;
   
10. border:
    
    1px solid red;
    
11. width:
    
    500px;
    
12. float:
    
    left;
    
13. margin-
    
    left:
    
    10px;
    
14. }
    
15. #triger:hover ~ #result {
    
16. background-
    
    color:
    
    red;
    
17. color:
    
    white;
    
18. }
    

Hope this code will help you, thank you for reading my tutorial.

Download