Would you know the answer to this?
Yes I would.
1 Like
It’s because the .activee isn’t specific enough.
Update it to the following, and it will work as you expect.
.playButtone.activee {
How come this one is specific enough?
https://jsfiddle.net/faLgfg0c/2/1
.activee {
cursor: pointer;
fill: #aaff00;
}
What’s the difference?
The difference is that you only have one thing being active there. When more things are happening you must be more specific. That’s just how it is.
I gather that would be the same answer for this:
I’ve been trying to figure this out.
How come adding this breaks the code
.activee {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 50px;
height: 50px;
background: #000000;
cursor: pointer;
fill: #aaff00;
}
This one doesn’t break the code:
.activee {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 50px;
height: 50px;
background: #000000;
cursor: pointer;
fill: #aaff00;
}
When more things are happening, it needs to be done like this.
.playButtone.activee {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 50px;
height: 50px;
background: #000000;
cursor: pointer;
fill: #aaff00;
}
That active declaration is being applied to the playButton element, where the position/margin/width/height/background all mess up the play button.
It works here, what are you talking about?
Yes it works there because only the playButton is given a class of active.
This is a good read, feel free to weigh in.
This too:
And here:
https://css-tricks.com/listless-navigation-using-css-to-do-more-with-less/
And was just told to read this too.
https://css-tricks.com/wrapup-of-navigation-in-lists/
The CSS-Tricks article says:
Please be sure to read that one too.
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.