How can we add hover effects by hovering something else, like given below? (HTML, CSS3)

Question

I made two divs and what I want, is to use pure CSS and add something like when I hover the first div the other div change its background.
Here is my code!

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hover Effects</title>
  <style type="text/css">
    #boxOne{
      background:grey;
      height:100px;
      width:100px;
      float:left;
    }
    #boxTwo{
      background:cyan;
      height:100px;
      width:100px;
      float:right;
    }
  </style>
</head>
<body>
  <div id="boxOne"></div>
  <div id="boxTwo"></div>
</body>
</html>

Answer 1

Assuming they are adjacent siblings, you could use the adjacent sibling combinator, + :

EXAMPLE HERE

#boxOne:hover + #boxTwo {
    background:red;
}

Alternatively, you could use the general sibling combinator, ~ . Both of which assume the elements are succeeding siblings, previous siblings won't be selected.

#boxOne:hover ~ #boxTwo {
    background:red;
}

How can we add hover effects by hovering something else, like given below? (HTML, CSS3)

Question

1 answers

solution1
4 ACCPTED 2014-01-27 02:49:00

How can we add hover effects by hovering something else, like given below? (HTML, CSS3)

Question

1 answers

solution1 4 ACCPTED 2014-01-27 02:49:00

solution1
4 ACCPTED 2014-01-27 02:49:00