Getting initial to work at the top of the code?

You will need to change the z-index back to a higher stacking level when your .activated js class kicks in

It will require this new lower ruleset…

.playe {
  position: absolute;
  left: 6px;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: -1;/* move it under the image*/
}
.activated .playe {
  z-index: auto;
}

auto

The box does not establish a new local stacking context. The stack level of the generated box in the current stacking context is the same as its parent’s box.

2 Likes

Since the 8th link is the playbutton, there will never be a working link there anyway.

I would use an <a> tag without the href attribute, as you have it shown.

As to whether or not it should be empty, the html5 specs say this…

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant.

And gives this example

<nav>
 <ul>
  <li> <a href="/">Home</a> </li>
  <li> <a href="/news">News</a> </li>
  <li> <a>Examples</a> </li>
  <li> <a href="/legal">Legal</a> </li>
 </ul>
</nav>

That looks like an example of how to handle the link of the current page the user is on.

So based on that I would think that text could very well represent the play button itself

<li><a>Audio Player</a></li>

Then with the z-index correction posted above the actual button will layer over the text

1 Like

I did that, and the text is still visible.


Maybe I should just leave it empty.

The title Play tooltip now works.

Hang on, let me take a look at that player. Something must be different with it because my tests worked earlier

Hide the text on the 8th anchor

.wrap li:nth-child(8n) a {
	text-indent:-99em
}

The other player had a black background and it was concealing the text

What if I did this instead:
background: white;

.activated .playButtone {
	position: absolute;

Would this work too?

The fix I gave above will work with any condition.

Yeah, that would work too.

CSS gives you the tools to overcome most situations. Learn to use those tools and you can be in control of your desired results

3 Likes

With this code, the play/pause title tooltips don’t appear, but all the other ones do, how come?

We’ve been over this before

The other ones that do work are svg images in the html, the rules are different in that case. The titles get displayed when hover over a single image.

This one here is only picking up the title on the parent div

<div class="playButtond" data-audio="http://hi5.1980s.fm/;" title="Image">

I guess since it is first in the source the browser picks it and ignores titles on child divs

The svg images are also BG images on that code

The thing is, when play/pause are placed in the html instead of the CSS, then the tooltips for them will show.

That’s what I just said[quote=“Ray.H, post:211, topic:284004”]
The other ones that do work are svg images in the html, the rules are different in that case. The titles get displayed when hover over a single image.
[/quote]

One of your other threads had a lengthy discussion on the title tags in svg images
Go back and review it if you need to

How come tooltips works here in the CSS for play/pause.

But not here?

Would something like this work on the code where the tooltips don’t show?

.activated .playe {
  z-index: auto;
}

or maybe there’s something else that would work in that circumstance.

That one use linear gradients for the lines
There is no positioning or z-index layering involved

That one uses pseudos for the lines
There IS positioning AND z-index layering involved

You can fix it so the title shows like so…

.playd, .paused {
  position: relative;
  z-index:1;
}

In this case it needed z-index:1 instead of auto

1 Like

Got it, thanks.

1 Like

How come you have it as,

.activated .playButtone

and not?

.playButtone .activated

.activated .playButtone {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 44px;
	height: 44px;
	cursor: pointer;
	border: 3px solid #0059dd;
	fill: #aaff00;
}

Since playButton is attached to this, wouldn’t it come first in this circumstance, before activated?

.playButtone.activated

	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 44px;
	height: 44px;
	cursor: pointer;
	border: 3px solid #0059dd;
	fill: #aaff00;
}

Because the html is different and the activated class is on .wrap in my example.

Use the devtools as Paul has been showing you to see where the classes get added dynamically.

1 Like

Which element(s) have the “activated” class and which has the “playButtone” class?

If you’re having trouble following your code it’s a good indication you should try to simplify things. eg. stop using “___a”, “___e” etc. names.