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

Submitted by argie on Friday, November 29, 2013 - 14:00.

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

<html>
<head>
<title>Css Tutorial</title>
<link rel="stylesheet" href="style.css" media="screen">
</head>
<body>
<div id="triger">
Hover Me
</div>
<div id="result">
        Results Goes Here
</div>
</body>
</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".

#triger {
        padding: 5px;
        cursor: pointer;
        width: 100px;
        float: left;
}
#result {
        padding: 10px;
        color: red;
        border: 1px solid red;
        width: 500px;
        float: left;
        margin-left: 10px;
}
#triger:hover ~ #result {
        background-color: red;
        color: white;
}

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

Add new comment

73 views