I have to following code:
<div class="playlist-item">
<a class="playlist-non-selected" href="#">
<span class="playlist-title">AudioAgent - Japanese Intro</span>
</a>
</div>
https://jsfiddle.net/4uyb7rh9/10/
The problem is when you rollover the text, in firefox and ie overPlaylistItem & outPlaylistItem are constantly called and cursor just keeps flickering. This works properly in chrome. Is there a way to make this work in all browsers?
This happens because when you set the class having pointer-events: none it triggers a mouse leave event, hence it flashes.
First of all, may I suggest you use :hover, second, whether you use :hover or script, you need to target the specific element that shouldn't be clickable, for example the span
.playlist-non-selected:hover span {
pointer-events: none;
}
Stack snippet
.playlist-item {
position: relative;
top: 0px;
left: 0px;
height: 40px;
margin-bottom: 5px;
overflow: hidden;
line-height: 40px;
}
.playlist-title {
display: inline-block;
position: relative;
top: 0px;
margin-left: 20px;
overflow: hidden;
font-size: 22px;
font-family: 'Gnuolane Free';
margin-bottom: 0px;
}
.playlist-non-selected {
color: #bbb;
}
.playlist-non-selected:hover{
color: red;
}
.playlist-non-selected:hover span{
pointer-events: none;
}
<div class="playlist-item">
<a class="playlist-non-selected" href="#">
<span class="playlist-title">AudioAgent - Japanese Intro</span>
</a>
</div>
And here is an updated fiddle using your script
Update based on comment about not working in Edge
Appears to be some kind of bug in Edge when the span has display: block so changing it to display: inline-block and it works.
For it to work in IE11, the span need display: inline (or just remove the display:...) so it use its default.
Update 2 based on comment about not working in Edge
If you need the span to display as block, changing it to a div and it works in both Edge and IE11.
An updated fiddle using your script
Why haven't you used :hover ? This can be done with CSS easily and will not pose any difficulty for browsers compatability like
.playlist-item {
position: relative;
top: 0px;
left: 0px;
height: 40px;
margin-bottom: 5px;
overflow: hidden;
line-height: 40px;
}
.playlist-title {
display: block;
position: relative;
top: 0px;
margin-left: 20px;
overflow: hidden;
font-size: 22px;
font-family: 'Gnuolane Free';
margin-bottom: 0px;
backface-visibility:hidden
}
.playlist-non-selected:hover{
color: red;
pointer-events: none;
backface-visibility:hidden
}
.playlist-non-selected {
color: #bbb;
}
<div class="playlist-item">
<a class="playlist-non-selected" href="#">
<span class="playlist-title">AudioAgent - Japanese Intro</span>
</a>
</div>
Related
THIS IS A DUPLICATE OF MY CLOSED QUESTION, BUT THE DUPLICATES ARE IRRELEVANT
First "duplicate"
It does not look at the class though, only the type, so if you happen to have non-articles with the same class you'll get unexpected results
Second "duplicate" is entirely something else.
Third "duplicate" is the explanation of why my try didn't work.
Fourth "duplicate" gives a workaround for the first element, not the last.
I have understood that there is no CSS selector for that, I juste want a solution. Be mindful of that before closing my question !
I have 5 buttons. They have an underlayer that make them seem they are active, as you will see in the snippet.
Each button can have an active state, but only starting from 1, and ending anywhere to 5.
They all have a divider, displayed in red in the snippet.
I would like to keep the divider into the underlayer, outside of the underlayer, but I would like to make it disappear at the end of the underlayer (in snippet, after button #2).
Following my first question, I understood that there is no CSS selector to do that. So what would be the best way to tackle this issue ?
.container {
display: flex;
align-items: stretch;
justify-content: start
margin: 12px;
position: relative;
}
button:after {
content: '';
height: 100%;
position: absolute;
background: red;
left: calc(100% + 12px);
width: 1px;
top: 0;
}
button.active:last-child:after {
content: none;
}
button {
flex: 0 0 calc(20% - 24px);
border: 0;
height: 32px;
color: black;
text-transform: uppercase;
text-align: center;
margin-right: 24px;
background: transparent;
position: relative;
}
button.active {
color: white;
}
.active-pill {
background: teal;
position: absolute;
height: 32px;
border-radius: 16px;
background: teal;
width: calc(40% - 12px);
z-index: -1;
}
<div class="container">
<div class="active-pill"></div>
<button class="active">Step 1</button>
<button class="active">Step 2</button>
<button>Step 3</button>
<button>Step 4</button>
<button>Step 5</button>
</div>
<h3>
Which selector to use to remove the content after button #2 ?
</h3>
In this particular case: Just put the divider on the left side of the buttons, instead of the right?
Then the one that doesn’t need one, becomes the first non-active one after the active ones, so it can easily be selected using button.active + button:not(.active):after
The first button here technically has a divider to the left as well then, that gets cut off here when the snippet gets rendered anyway. But in a situation where you’d need to explicitly “eliminate” it, you could still go with just plain and simple :first-child here (I’m assuming if there’s active buttons, it always starts with the first one, right?)
This is a bit similar to what Hao suggested in their answer, but with their version, the divider gets placed on the right on some buttons, on the left on others … I’d prefer to simply have it the same on all.
.container {
display: flex;
align-items: stretch;
justify-content: start
margin: 12px;
position: relative;
}
button:after {
content: '';
height: 100%;
position: absolute;
background: red;
right: calc(100% + 12px);
width: 1px;
top: 0;
}
button.active + button:not(.active):after {
content: none;
}
button {
flex: 0 0 calc(20% - 24px);
border: 0;
height: 32px;
color: black;
text-transform: uppercase;
text-align: center;
margin-right: 24px;
background: transparent;
position: relative;
}
button.active {
color: white;
}
.active-pill {
background: teal;
position: absolute;
height: 32px;
border-radius: 16px;
background: teal;
width: calc(40% - 12px);
z-index: -1;
}
<div class="container">
<div class="active-pill"></div>
<button class="active">Step 1</button>
<button class="active">Step 2</button>
<button>Step 3</button>
<button>Step 4</button>
<button>Step 5</button>
</div>
<h3>
Which selector to use to remove the content after button #2 ?
</h3>
Unfortunately, in pure css there is no way to select the last element with a specific class.
There are loads of possible solutions to your issue however. To name a few:
Since you can define your own tag-names in HTML5, you can rename the button elements with the active class to activebutton. That way you can target them with the :last-of-type selector. This might be the closest to what you are trying here. You could get rid of the underlayer as well...
You could indicate the active element in it's parent. In this case the container, and target the nth child.
You could add an extra class to the last active element in your html
You could go the javascript route...
.container {
display: flex;
align-items: stretch;
justify-content: start
position: relative;
margin-bottom: 12px;
}
button ,
buttona,
span{
padding: 0 50px;
border: 0;
height: 32px;
font-family: 'system-ui';
font-size: 11px;
line-height: 32px;
color: black;
text-transform: uppercase;
text-align: center;
background: transparent;
position: relative;
}
buttona,
span{
background: teal;
color: white;
}
button:after,
buttona:after,
span:after{
content: '';
height: 100%;
position: absolute;
background: red;
right: 0;
width: 1px;
top: 0;
}
buttona:first-of-type,
span:first-of-type{
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
}
buttona:last-of-type,
span:last-of-type{
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
}
buttona:last-of-type:after,
span:last-of-type:after{
display: none;
}
<div class="container">
<buttona>1</buttona>
<buttona>2</buttona>
<button>3</button>
<button>4</button>
<button>5</button>
</div>
<div class="container">
<span>1</span>
<span>2</span>
<span>3</span>
<button>4</button>
<button>5</button>
</div>
Having difficulties with vertical align of inline element with overflow: hidden and differrent line height. Basically this is problem:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
.mybutton {
display: inline-block;
position: relative;
line-height: 36px;
vertical-align: middle;
text-align: center;
padding: 0;
border: 0;
background: transparent;
}
span {
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 14px;
text-decoration: underline;
}
.mybutton span {
vertical-align: middle;
display: inline-block;
min-width: 4px;
text-align: left;
line-height: 20px;
}
.overflow-ellipsis {
overflow: hidden;
width: 100px;
display: inline-block;
}
</style>
<ul>
<li style="height: 36px">
<span>
<button class="mybutton">
<span class="overflow-ellipsis">11111111111111111111111111111</span>
</button>
<span>111</span>
</span>
<span>111</span>
</li>
</ul>
And concrete problems are:
This markup is well aligned in Chrome, however in IE 11 first element is a bit lower than second one.
Changing Font to Arial will make it bad aligned in Chrome also.
Any idea how to fix this is welcome.
Note: different line height, overflow: hidden and display: inline-block (on button and contained span) is a MUST
Adding a negative margin on .overflow-ellipsis solves the problem:
.overflow-ellipsis {
overflow: hidden;
width: 100px;
display: inline-block;
margin-top: -2px;
}
Preview it here: JSFiddle
I have a few links on one line next to each other, and I would like to have dividing dashes between them. I chose to make this happen with the use of the ::before pseudo element, and it works nicely.
However, hovering over the dividers also triggers the hover over the element I have the ::before on.
This is a fiddle showing the issue. If you hover over the dashes, the underline appears under the a.
In my search as to how to prevent this from happening, I ran into this stackoverflow question. Together with the documentation on developer.mozilla.org and the caniusethis page on the pointer-events property I was sure this would fix it. But it didn't.
What am I missing here?
You need to make changes in css
.wrap a::before {
content: '----';
padding: 0 15px;
position: absolute;
left: -50px;
pointer-events: none;
}
.wrap a {
text-decoration: none;
position: relative;
margin-left: 50px;
display: inline-block;
}
You will need to use position:absolute for the ---- to make it out of the <a> flow and also position:relative to the parent <a> element.
Stack Snippet
.wrap a {
text-decoration: none;
margin: 0 30px;
position: relative;
}
.wrap p {
margin: 0;
}
.wrap {
font-family: sans-serif;
border: 1px solid green;
padding: 5px;
margin-bottom: 20px;
}
.wrap a:nth-of-type(1) {
margin-left: 50px;
}
.wrap a::before {
content: '----';
position: absolute;
pointer-events: none;
left: -30px;
transform: translateX(-50%);
}
.wrap a:hover {
text-decoration: underline;
}
<div class="wrap">
<p>These links do not have the pointer-events: none; property</p>
<br>
link text one
link text two
link text three
</div>
<div class="wrap">
<p>These do have pointer-events: none; yet their behaviour is the same as with the block above.</p>
<br>
link text one
link text two
link text three
</div>
I am making a roster. I have a container absolutely positioned. Within this, I have an unordered list with several list items positioned relatively. Within each list item I have some text (displaying their name) and then below this an absolutely positioned image (of them). It works great in both Chrome and IE. When viewed in firefox, the list item are positioned correctly, the names too, but the images are all positioned on top of each other so it looks like there is only one in the bottom left corner of the container. How could this work on Chrome/IE and Firefox? Here is a sample of the code:
#roster {
position: absolute;
width: 1300px;
left: 50%;
margin-left: -650px;
text-align: center;
}
p {
background-color: rgba(51,51,51,.9);
height: 40px;
}
li {
position: relative;
width: 150px;
height: 180px;
border: 1px solid black;
display: inline-block;
display: -moz-inline-stack;
vertical-align: top;
margin: 5px;
zoom: 1;
*display: block;
}
li img {
width: 150px;
height: 130px;
position: absolute;
left: 0;
bottom: 0;
border-top: 1px solid #fff;
}
a {
text-decoration: none;
margin-top: 12px;
}
</style>
<body>
<div id="roster">
<ul>
<li><p>A name</p><img src="_images/stock.jpeg"></li>
<li><p>A name</p><img src="_images/stock.jpeg"></li>
<li><p>A name</p><img src="_images/stock.jpeg"></li>
<li><p>A name</p><img src="_images/stock.jpeg"></li>
</ul>
</div>
</body>
Just in case it helps someone later on:
Using a wrapping <div> instead of an <ul> and individual <div> instead of <li> worked well across all browsers. Some CSS to position everything in the grid format such as:
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
i've a clickable heart icon and i've a number at his right. I want the number to change everytime i click the heart. Do you know how can i achieve that? i'm messing around with PHP and CSS. The codes are these ones:
<span class="like-post" title="Like">
<span class="icon"> </span>
<span class="number"> 0 </span>
</span>
and the style.css
.like-post {
font-size: 11px;
font-weight: bold;
color: #555;
display: inline-block;
cursor: pointer;
width: 28px;
height: 15px;
margin-left:3px;
}
.icon {
display: block;
width: 15px;
height: 15px;
position:relative;
top: 3px;
left:1px;
background: url('images/heart15.png');
}
.number {
display: BLOCK;
float: right;
position: relative;
top: -14px;
}
thanks!
You could write some jQuery to send an AJAX request to your PHP script on a .click() event and use .text() to change the number with the result from AJAX.