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{
}
Related
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?
Currently I've got somewhere in my css a:visited{color:purple} thing is this works fine for hyperlinks but I created a button using some css and an a tag but the problem is that I don't want it to inherit the visited color, how do I change this ?
So use a stronger selector like
.button a:visited {
color: #000;
}
And over ride the default one.
The :visited psuedoclass has the same specificity as a class, so if your button is just .button it will win. However, if you use a.button then it will lose if the button is defined after the :visited style. You can further boost the specificity with something like html a.button to guarantee a win.
I have little experience with CSS so this might be a very simple problem.
I have a table of contents on my web page with links like this:
User interface
and somewhere else I have a bookmark like like this:
<a name="user-interface">User Interface</a>
Besides that I have a CSS file with the following style:
a:hover
{
color:#D090D0;
background:#803080;
text-decoration:none;
}
The goal is to change the color and background color of the link when I move the cursor over the link, and that is working perfectly. But the problem is that the bookmarks are also changing style when I move the mouse pinter over them. It makes sense to me since both the link and the bookmark use the <a> tag but i cannot figure out how to distinguish both on the CSS. I know I could use a class for the link but I wonder if there is a better way.
<a name="..."> is deprecated.
Instead, you should just put an id="..." on any element.
To answer the question, add :link.
While the :link selector appears to work, according to W3Schools, it only applies to unvisited links.
(Edit: It appears W3Schools was misleading on this. The :link selector, in some browsers at least, will select <a> tags that link to something, visited or not, but the color attribute will be overridden by the browser defaults for visited links. Apparently the attribute selector, as detailed below, has a higher specificity than the default browser settings, so if you want to force your links to be the color you set, regardless of whether the user has clicked that link before or not, then the attribute selector should be used.)
One way to do this if you're not overly concerned with IE6, and have a doctype specified for IE 7 and 8, would be to use an attribute selector:
a[href]:hover {
color:#D090D0;
background:#803080;
text-decoration:none;
}
Outside of that, I think you'd be best off adding a class.
Use :link selector to select a link
a:link:hover
{
color:#D090D0;
background:#803080;
text-decoration:none;
}
http://jsfiddle.net/9r4L9/
Use a class:
In HTML, use the class attribute.
User interface
<a name="user-interface">User Interface</a>
In the css:
.foo:hover
{
color:#D090D0;
background:#803080;
text-decoration:none;
}
Now, the style is only applied to the elements having class foo.
Add a class to the bookmark and then add some style on it after the hover declaration:
<a class="bookmark" name="user-interface">User Interface</a>
and css:
a:hover
{
color:#D090D0;
background:#803080;
text-decoration:none;
}
a.bookmark {
color: black;
background: white;
text-decoration:none;
}
Question for CSS designers.
How do I add anchor behavior to any css class without "<a href.." attribute. Here is what I mean.
I'm going to have this html code:
<span class="my_link">LINK TO SOMETHING </span>
and this text should have link behavior (visited color, active color and underlining, "pointing hand pointer").
Is it possible to make this in css?
span.my_link { text-decoration:underline; cursor:pointer; }
You could make use of :hover if you want to apply hover styles to it. Though I'm really not sure why you can't use an anchor.
The visited and active color will have to be done in Javascript. The pointer and underline can be done like this:
.my_link { cursor: pointer; text-decoration: underline; }
Unless you put it in an tag, you can not get the visited, active, etc colors without javascript. You can however get the pointing hand cursor, and the ability for it to go somewhere when you click on it. To make it have the correct pointer use this:
.my_link{ cursor: pointer; }
and for the clicking, use.
$(".my_link.").click(function(){
location.href="page";
}