Preventing play/pause buttons from interfering with circle hover

HTML & CSS
1

When the mouse goes over the circle it changes color, but when it touches the buttons the color changes back. How do I prevent the color from changing back when the mouse touches the buttons?

 circle:hover {
 stroke: red;
}

.stack {
  position: relative;
  z-index: 1;
  stroke-width: 2;
  stroke: green;
  fill: transparent;
}
2

This worked:
z-index: 4;

Is this right?

.stack {
  position: relative;
  z-index: 4;
  stroke-width: 2;
  stroke: green;
  fill: transparent;
}
3

Wait, like this?

Am I doing this right?

circle:hover {
 stroke: red;
}

.stack {
  position: relative;
  z-index: 3;
  stroke-width: 2;
  stroke: green;
  fill: transparent;
}


.linesd::before,
.linesd::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 83px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.linesd::after {
  left: 174px;
}

.playd,
.paused {
  position: absolute;
  top: -4px;
  right: 0;
  bottom: 0;
  left: 4px;
  margin: auto;
  fill: #0059dd;
  z-index: 2;
}

.paused {
  left: 0;
}

circle:hover {
 stroke: red;
}

.stack {
  position: relative;
  z-index: 3;
  stroke-width: 2;
  stroke: green;
  fill: transparent;
}
4

When I do this, tooltips no longer works on the play/pause buttons.

.stack {
  position: relative;
  z-index: 3;
  stroke-width: 2;
  stroke: green;
  fill: transparent;
}

circle:hover {
 stroke: red;
}
7

You mean, when you hover on the circle it changes colour, as per the rule you set, and when you cease to hover on the circle (move the mouse over another element) it reverts to its normal colour. That’s how hover works.

Rather than using an svg circle, you could simply add a border to the play button, which would change colour if you hovered anywhere on or inside the border.

9

When it’s set like this the tooltips don’t show for the play/pause buttons.
#4

11

And when it’s like this the hover is broken.
z-index: 1;

#1

12

You’ve used z-index: 3 on .stack, placing it in front of the play button.

13

See this:
#11

14

Have you tried z-index:0 ?


.playd,
.paused {
  position: absolute;
  top: -4px;
  right: 0;
  bottom: 0;
  left: 4px;
  margin: auto;
  fill: #0059dd;
  z-index: 0;
}
15

Tooltips still don’t show:

16

My answer was in response to your original question about the circle hover. This is the problem when you keep changing questions half way through.:frowning:

Where is your example with the tooltips working?

17

Tooltips work.
Hover is broken:

18

Why would I use 0 when there’s no issue with 1?


.playd,
.paused {
  position: absolute;
  top: -4px;
  right: 0;
  bottom: 0;
  left: 4px;
  margin: auto;
  fill: #0059dd;
  z-index: 1;
}

.paused {
  left: 0;
}

.stack {
  position: relative;
  z-index: 2;
  stroke-width: 2;
  stroke: green;
  fill: transparent;
}

.stack:hover {
  stroke: red;
}

.linesd::before,
.linesd::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: 83px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.linesd::after {
  left: 174px;
}
19

Not for me!

20

Do you mean like this?

.playd,
.paused {
  z-index: auto;

.stack {
  z-index: 1;

.linesd::before,
.linesd::after {
  z-index: 2;
21

Moving target springs to mind!

Can you show an example where the tooltips are working in Chrome?

1 Like
22

Firefox:

23 
.playd,
.paused

Doesn’t require a z-index.

Correct?

If it works without it, then one is not needed.

24

Never mind, it is required in order for tooltips to work.