Wim Wim - 2 years ago 56
HTML Question

Change image A & B when hover image C

I'm trying to have 3 divs A, B & C each having 3 different backgrounds depending on which div gets hovered

The idea is to change background A, B & C on hover but also
change image A & B when hover image C
change image A & C when hover image B
change image B & C when hover image A

It seems that when trying to change the background of a div before the on:hover div it fails

Any suggestions would be much appreciated !!! :-)


<div class="team1"></div>
<div class="team2"></div>
<div class="team3"></div>


.team1 {
background: url("url of IMAGE1/a");

.team2 {
background: url("url of IMAGE2/a");

.team3 {
background: ("url of IMAGE3/a");

.team1:hover {
background: url("url of IMAGE1/b");

.team2:hover {
background: url("url of IMAGE2/b");

.team3:hover {
background: url("url of IMAGE3/b");

.team1:hover ~ .team2 {
background: url("url of IMAGE 2/c");
--> this works

.team1:hover ~ .team3 {
background: url("url of IMAGE 3/c");
--> this works

.team2:hover ~ .team1 {
background: url("url of IMAGE 1/c");
--> this doens't work!

Answer Source

In this example I've only made it so the three change on hovering over team-1, because the code would be very long for an answer! I'm sure you will be able to do the rest. If you can't lmk in the comments and I'll post the full code.

  function() {
  function() {
div {
  height: 100px;
  width: 100px;
  padding: 5px;
  display: inline-block;
.team-1 {
  background: green;
.team-2 {
  background: red;
.team-3 {
  background: blue;
.team-1-1 {
  background: grey;
.team-2-1 {
  background: white;
.team-3-1 {
  background: black;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="team-1"></div>
<div class="team-2"></div>
<div class="team-3"></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download