Activating hover on 2 elements to change at the same time

HTML & CSS
1

How would I get these to change color at the same time?

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

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

I tried this way.

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

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

.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;
}
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.