Change image A & B when hover image C

Question

I have 3 divs, A, B & C, and each have 3 different backgrounds depending on which of the three div is hovered over.

The idea is to change background of the divs as follows:

• On hover of A, change A background to a1, B to b1 and C to c1
• On hover of B, change A background to a2, B to b2 and C to c2
• On hover of C, change A background to a3, B to b3 and C to c3

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

HTML

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

CSS

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

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

.team3 {
  background: url("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 {
  /* this works */
  background: url("url of IMAGE 2/c");
}
/* this works */

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

.team2:hover ~ .team1 {
  /* this doesn’t work! */
  background: url("url of IMAGE 1/c"); 
}

Answer 1

This can not be done purely with css. You must use JS instead.

You can do that in pur CSS only if .b is after .a in the HTML.

In below exemple :

• .a:hover => .b and .c work
• .b:hover => .a don't work because it's before ; .c work because it's after
• .c:hover => .a and .b don't work because there're before

.child {
  height: 100px;
  width: 100px;
  padding: 5px;
  display: inline-block;
}
/* Manage A */
.a {
  background: green;
}
.a:hover ~ .b {
  background: #8AB800;
}
.a:hover ~ .c {
  background: #33FF66;
}
/* Manage B */
.b {
  background: red;
}
.b:hover ~ .a {
  background: #FF0080;
}
.b:hover ~ .c {
  background: #FF7A7A;
}
/* Manage C */
.c {
  background: blue;
}
.c:hover ~ .a {
  background: #7A7AFF;
}
.c:hover ~ .b {
  background: #00FFFF;
}
/* Manage all */
.a:hover, .b:hover, .c:hover {
    background: yellow;
}

<div class="a child"></div>
<div class="b child"></div>
<div class="c child"></div>

An exemple in pur JS :

$('.child').css({
  'height': '100px',
  'width': '100px',
  'padding': '5px',
  'display': 'inline-block',
});
$('.a:hover,.b:hover,.c:hover').css('background', 'yellow');
$('.a').css('background', 'green').hover(function() {
  $('.b').css('background', '#8AB800');
  $('.c').css('background', '#33FF66');
});
$('.b').css('background', 'red').hover(function() {
  $('.a').css('background', '#FF0080');
  $('.c').css('background', '#FF7A7A');
});
$('.c').css('background', 'blue').hover(function() {
  $('.a').css('background', '#7A7AFF');
  $('.b').css('background', '#00FFFF');
});

.a:hover, .b:hover, .c:hover {
background: yellow !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a child"></div>
<div class="b child"></div>
<div class="c child"></div>

Answer 2

The ~ in CSS means that the element will come somewhere after the first element. In your case team-3 cannot target team-1 as it comes before team-3.

So .team-3:hover ~ .team-1 won't work because 3 is after 1, but .team-1:hover ~ .team-3 will work, because 1 is before 3.

So here is a jQuery solution to do what you want.

$(".team-1").hover(
  function() {
    $(".team-1").addClass("team-1-1");
    $(".team-2").addClass("team-2-1");
    $(".team-3").addClass("team-3-1");
  },
  function() {
    $(".team-1").removeClass("team-1-1");
    $(".team-2").removeClass("team-2-1");
    $(".team-3").removeClass("team-3-1");
  }
);

$(".team-2").hover(
  function() {
    $(".team-1").addClass("team-1-2");
    $(".team-2").addClass("team-2-2");
    $(".team-3").addClass("team-3-2");
  },
  function() {
    $(".team-1").removeClass("team-1-2");
    $(".team-2").removeClass("team-2-2");
    $(".team-3").removeClass("team-3-2");
  }
);

$(".team-3").hover(
  function() {
    $(".team-1").addClass("team-1-3");
    $(".team-2").addClass("team-2-3");
    $(".team-3").addClass("team-3-3");
  },
  function() {
    $(".team-1").removeClass("team-1-3");
    $(".team-2").removeClass("team-2-3");
    $(".team-3").removeClass("team-3-3");
  }
);

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: chartreuse; }
.team-2-1 { background: deeppink; }
.team-3-1 { background: aqua; }

.team-1-2 { background: darkgreen; }
.team-2-2 { background: darkred; }
.team-3-2 { background: darkcyan; }

.team-1-3 { background: forestgreen; }
.team-2-3 { background: fuchsia; }
.team-3-3 { background: dodgerblue; }

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