When a Select2 dropdown is open, the JavaScript hover event and the css pseudoclass do not work anymore.
E.g.
p:hover {
color: red
}
only has effect when the dropdown is closed and not when it's opened.
See here for self contained example: http://jsfiddle.net/cre5hckw/6/
This may be related to https://github.com/ivaynberg/select2/issues/1715.
I'm looking forward to any feedback!
Select2 uses a class, not :hover pseudoclass.
.select2-results .select2-highlighted {
color: red;
}
Related
I'd like to show the :active CSS effect on mobile devices before the user lifts their finger. Currently using :active and it shows its effect after the finger was lifted. One of the few sites I found that has the effect I like are Amazon's buttons.
a:hover:active {
background-color: yellow;
}
link
This seemed to do the trick for me! Apparently the active has to be after the hover based on how CSS evaluates its code.
If you are using Javascript use the onmousedown event.
function mouseDown() {
document.getElementById("myA").style.color = "red";
}
<a id="myA" onmousedown="mouseDown()"> Link
</a>
I have a button like so:
When I hover over it, it looks like this:
When I click on it, it'll take me to a new tab that shows my resume. However, when I come back, there's an underline that I'd like to remove:
And I can and did remove it because I styled the :focus part of the button:
.resume-button:focus {
text-decoration: none;
color: #FFFFFF;
}
The problem arises when the user tries to hover over the link again. It's not hovering anymore because the link is still "clicked"; hence when I hover, the color of the text "Resume" remains white and won't change color until I click somewhere else to reset the link. How can I reset the state of the <a> without clicking on some other part of the website?
Try active and visited state to cover all possibilities. Sometimes link stays active after using browser back button, and links may be marked as visited during normal web browsing.
a:active, a:visited {
color: #fff;
}
Link can have four states:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - link in the moment when clicked
These are the pseudoclasses and they should be declared in this specified order, because in a timeline they can happen only one after other.
People tend to think some shortcuts helpful in remembering the right sequence for example: LoVeHAte.
Use :active selector instead. :focus is selected thing, :active is pressed thing.
the one you're looking for is :visited
a:visited{ /*styles */}
Use the :link selector to style links to unvisited pages,
the :hover selector to style links when you mouse over them,
and the :active selector to style links when you click on them.
I want to change the color of a link when a user focuses on it by navigation to it using the TAB key.
that's the easy part, as it's done by this:
a:focus{ color: red; }
the problem is, the link is also colored red when activated, e.g: when a user clicks the "ENTER" key or the left mouse click.
How can I prevent this side effect and keep the coloring only when user focuses on the link using the "TAB" key ?
I tried this:
a:focus{ color: red; }
a:active{ color: blue; }
(blue is the default color)
it didn't work, what happens is it first turned the link blue but then red in a slit second...
I need this done of every link on my site so I don't want to use any complicated javascript code to do this and hoping to do this in CSS only.
any suggestions ?
edit: I also tried this:
a:active:focus{ color: blue; }
in order to capture a state in which the element is focused AND active so I can override a "focus" CSS.
it didn't work either.
The problem is the order of the rules.
a:link
a:visited
a:hover
a:active
a:focus
Focus has to be the last.
I tried and it works well.
Try using :visited pseudo class
a:visited{color:blue;}
I don't think you can do this in css only.
When you click a link, you give it focus.
You could try a little jquery routine to give all of your links a click handler which immediately blurs the focus away?
$(function () {
$('a').on('click', function() {
this.blur();
});
})
jsfiddle: https://jsfiddle.net/6sujjuvn/
In the fiddle, you can see that after it spawns the new tab/window, your clicked link back on the jsfiddle page no longer has focus
Have you tried:
a:active{ color: default; }
It's just a simple question. I made a button using <a> with background image. It should use different image when it is clicked. I use :active property in its css. But the thing is even after the button is not pressed (release), the :active class is still there. So it is still using the image for the status.
How come? And how I should do it, when I only want to apply the class when the button is pressed?
Thank you. I hope I have explained it well enough.
catwoman, if you just want it while pressed active should work. if you're looking for toggle, then you need what's below.
CSS doesn't have a selector that toggles, except for :checked on checked inputs.
You need Javascript:
<a href="#" onclick="toggle_class('foo');"
or to use jQuery Toggle: http://api.jquery.com/toggle/
--
then again, if you are actually looking for button pressed, active should work. paste your code here and we can check it out. if you're doing something that can't be performed solely with css :active pseudoclass, look at the mousedown event: http://api.jquery.com/mousedown/
works fine for me: Demo
button {
background-color: blue;
border: none;
color: #FFF;
}
button:hover {
background-color: green
}
button:active {
background-color: red
}
Can you provide a Demo to have a look in to it?
ive been googling but cannot seem to find a mouse out method, similar to hover, for css.
Is there one and if so how should it be coded?
You only need the :hover pseudo-class for this, when you mouse out of the element, it'll return to it's default non-:hover state, like this:
.class { color: black; }
.class:hover { color: red; }
when you hover, the color will be red and when you "mouseout", the color will return to black because it no longer matches the :hover selector. This is the default behavior for all browsers, nothing special you need to do here.
If you want to do something programmatic, you're looking for the mouseout JavaScript event.
There is the :hover pseudo-class:
element:hover { color: red }
there is no event or selector for when the :hover status ends, if that is what you're looking for.
You will have to turn to Javascript and the onmouseout event for that.
There is no mouse out event in CSS. You need javascript in order to do that.
There isn't a mouseout-type selector for CSS.
But an element's normal style is its "mouseout" state!
What, exactly are you trying to do that normal CSS and the :hover selector don't cover?
Chances are, you can do it with JavaScript. See here or here.
You are looking for the :hover pseudoclass.
a:hover {background: red;}
will highlight any link you hover over.
You can only have the following CSS 'events' as far as I'm aware.
a (default),
a:hover,
a:active,
a:visited
AFAIK There is no mouse out event but
if you want for the link you visit earlier you can use
a:visited{
}