Ray.H
December 17, 2017, 12:54am
202
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
Ray.H
December 17, 2017, 1:45am
203
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
asasass
December 17, 2017, 2:43am
204
I did that, and the text is still visible.
Maybe I should just leave it empty.
The title Play tooltip now works.
Ray.H
December 17, 2017, 2:56am
205
Hang on, let me take a look at that player. Something must be different with it because my tests worked earlier
Ray.H
December 17, 2017, 3:07am
207
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
asasass
December 17, 2017, 3:09am
208
What if I did this instead:
background: white;
.activated .playButtone {
position: absolute;
Would this work too?
Ray.H
December 17, 2017, 3:11am
209
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
asasass
December 17, 2017, 3:16am
210
With this code, the play/pause title tooltips don’t appear, but all the other ones do, how come?
Ray.H
December 17, 2017, 3:28am
211
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
asasass
December 17, 2017, 3:30am
212
The thing is, when play/pause are placed in the html instead of the CSS, then the tooltips for them will show.
Ray.H
December 17, 2017, 3:34am
213
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
asasass
December 17, 2017, 3:39am
214
How come tooltips works here in the CSS for play/pause.
But not here?
asasass
December 17, 2017, 3:42am
215
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.
Ray.H
December 17, 2017, 4:19am
216
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
asasass
December 18, 2017, 7:05pm
218
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;
}
asasass
December 18, 2017, 9:23pm
219
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;
}
PaulOB
December 18, 2017, 9:24pm
220
asasass:
and not?
.playButtone .activated
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.