Activating hover on 2 elements to change at the same time

#1

How would I get these to change color at the same time?
https://jsfiddle.net/3qyzf1we/1/

.jacket-left .circle:hover {
  border: 1px solid red;
}

.jacket-left .play:hover {
  fill: red;
}

I tried this way.
https://jsfiddle.net/c845sk0e/1/

.jacket-left .circle:hover,
.jacket-left path:hover{
  border: 1px solid red;
  fill: red;
}
#2

Hi there asasass,

try it like this, maybe…

.jacket-left .circle:hover,
.jacket-left .circle:hover .play path{
     border: 1px solid red;
     fill: red;
 }

coothead

1 Like
#3

How would I combine these 2 together?

I’m confused on how this one would be done.

The hover works here, the .circle just needs to be connected with the .play so they are in sync.
https://jsfiddle.net/cv91gzbp/1/

 .jacket-left .circle:hover  {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border: 1px solid red;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px;
}
 
 .jacket-left .play:hover {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 24.2px;
  height: 41.8px;
  fill: red;
}
#4

This worked, I’m not sure if it can be improved more than this.
https://jsfiddle.net/hxvbnc1L/1/

.jacket-left .circle:hover {
}

.jacket-left .circle:hover .play {
}

.jacket-left .circle:hover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border: 1px solid red;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px;
}

.jacket-left .circle:hover .play {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 24.2px;
  height: 41.8px;
  fill: red;
}