Wim Wim - 5 months ago 8
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 !!! :-)

HTML

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


PART OF MY CSS

.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

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.

$(".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");
  }
);
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>

Comments