I want to set the colour for the active link. My links have the inner span like the following.
<span>Home</span>
I have style it like the following but it did not work.
a:active span{
color:yellow;
}
What css rule should I write for this to work.
Thanks in advance.
The correct CSS is as follows. You should replace the = with a :.
a:active span {
color: yellow;
}
Edit
This is a response to the comment
I want to set the color of the link to yellow when index.php display
This is not what :active does. This text is taken from w3.org. ( http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes )
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.
If you want to style the page that is currently being viewed you have to do that server side.
This should work, its valid, but maybe you expect it to do something else then what it does. :active is not the selector for the menu item you selected or something, like the menu item you selected is yellow on the page after as a #current link or something.
Something else:
Note: :active MUST come after :hover (if present) in the CSS definition in order to be effective!
Related
I want to make a button that displays a background color when hovering and a button color without a background color when the button is down. Here is my current code:
.windowButton:hover {
background-color:#1a82b8;
}
.windowButton:active #windowClose polygon {
fill:#1a82b8;
}
The problem with the above code is that it turns the icon a color when :active but doesn't remove the background color set by :hover. How do I remove the background color?
You have to set a new background color on :hover state
.windowButton:hover {
background-color:#1a82b8;
}
.windowButton:active {
fill:#1a82b8;
background-color:#000000;/*You can put the color you want*/
}
Pseudo states inherit values. For consistency purposes, it is best to only declare the styles which you are changing in your pseudo state rules.
Note: :hover MUST come after :link and :visited (if they are present) in the CSS definition, in order to be effective!
How about this?
I would guess, its cause on the first property you are using background-color and the second fill.
button:hover {
background-color: red;
}
button:active {
background-color: blue;
}
jsFiddle working example (1)
In order for the active state to be applied while the user is also hovering over the button, it's necessary for the :hover selector to come before the :active selector in the code.
From https://developer.mozilla.org/en-US/docs/Web/CSS/:active:
Styles defined by the :active pseudo-class will be overridden by any
subsequent link-related pseudo-class (:link, :hover, or :visited) that
has at least equal specificity. To style links appropriately, put the
:active rule after all other link-related rules, as defined by the
LVHA-order: :link — :visited — :hover — :active.
While the accepted answer did mention that it's necessary to have :active come after :link and :visited, it doesn't say that it must also come after :hover (since in the example given in the question this was already the case). However this wasn't immediately clear to me, so I wanted to post this answer for anyone else who was stuck like I was because the :hover selector was coming after :active.
Also, I think the LVHA-order is a handy rule to keep in mind and relevant to this question.
`button:hover{background-color: transparent;color: yellow;}
button:active {background: white;color: black;}`
All anchor links except for one are getting background color changed on focus, except for one.
HTML
<a id="login-as-guest">Cancel and browse as guest</a>
CSS
#login-as-guest a:focus{
background-color: yellow;
}
Any ideas?
To use focus you need to assign a tabindex to the element as it is not an input. Otherwise you could use active. Also your code is not correct. Currently it is looking for an a element within an element with that ID.
The correct way would be
a#login-as-guest:focus{ background-color: yellow; }
Both ways:
DEMO http://jsfiddle.net/kevinPHPkevin/t2hbS/
An anchor tag without a href attribute can not receive focus (at least in Chrome, but I think it is standard behaviour). Also you selector is incorrect, you are trying to select an a that is a descendant of #login-as-guest. The selector should be a#login-as-guest:focus, which will select a a with an id of #login-as-guest that has focus.
Have a look at the updated fiddle: http://jsfiddle.net/VKvBy/1/
I am using MVC3.
I have a table and an Html.ActionLink inside of it.
I have already set the text decoration for none, but the link is still blue. I change the table:hover background-color and the color(of the text), and when I put the mouse over the row, the text that are not a link gets white, but the link still blue. If I change the a:hover, the link gets white just when I put the mouse over it, and not just over the row.
Is there a way to do that with css?
Typically, to cover all the anchors when you are hovering over the row.
#tableid tr:hover a {
/* Your Styles */
}
But this does not work on all IE browser so, use JS to catch the event and apply styles to anchors in it.
use the following css:
#yourTableId:hover a {
color: #FFF;
}
you can replace #yourTableId also with table and / or .yourTablesClass depending on where the css should be used ;)
this works also for child elements e.g.:
#yourTableId div:hover a
#yourTableId tr:hover a
so in general we can say you can use the following:
#yourTableId *:hover a
where * is a tagname, classname or id (dont forget class and id prefixes -> .classname and #idname)
here a jsfiddle example
I was looking here at CSS :active Selector.
The :active selector styles links to
active pages
That got me thinking, what the heck is an 'active page' in HTML/CSS terminology...
At this point I went to the w3docs Section : 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus.
The :active pseudo-class applies while
an element is being activated by the
user. For example, between the times
the user presses the mouse button and
releases it.
So I used one of the w3shools try it pages and hack together an example, substituting the following code, which you can just cut & paste and try.
<html>
<head>
<style type="text/css">
:focus,:active
{
outline-offset: 10px;
outline: solid;
}
</style>
</head>
<body>
<p>Click the links to see the background color become yellow:</p>
w3schools.com
wikipedia.org
<button type="button">Click Me!</button>
<form>
<input type="text"/>
</form>
</body>
</html>
The form field works for :focus. But the button or links don't work for :active.
Why is that? Is there something about 'active page' I'm not understanding that w3schools talked about.
I saw this nice tip when Googling for it, but I don't think it's related.
There is no concept of "active page" in CSS. In fact, the SitePoint Reference debunks this by saying:
The pseudo-class does not signify a link to the active, or current, page—that’s a common misconception among CSS beginners.
What the spec says is right: :active simply styles elements that are activated, e.g. clicked (as in the example given) or in some other way triggered such that the browser starts navigating to the link's target.
Note that it doesn't just apply to <a> elements; it may apply to any non-form-input element that's clicked. For instance, you can do this:
p:active {
color: red;
}
And any paragraph you click will flash its text red.
Note however that the exact definition and implementation is left up to the browser, but in general, you can rely on <a> elements having an activated state.
:active is the style given to an element (a or a button, for example) when the mouse is held down over it. You might have seen it visible on some sites when you click a styled button; when you actually click the button, it might change. This is the :active pseudo-class.
I've always used :active for links. The split second before the browser takes you to the page you just clicked on, the text would change to the color you called in a:active{ ... }
Example:
a:active { color:pink; font-weight:bold; }
Most browsers support it, but it's really not worth your time to style it. Back in the day of 56k dial up it was a nice thing to have to visually show that the link the user clicked was being loaded.
I have got a CSS division called home which has got certain attributes with an action for hover for the anchor tags inside the home division like this:
#home a:hover
{
background-image:url(images/template_03_1.png);
position:relative;
top:3.5em;
left:0.5em;
}
Now, what I want to do is access the 'home' id's attributes inside the block defined above so that I change the properties of the home division whenever some one hovers on an anchor tag inside the home division. I know this is very easily possible in JavaScript but is this possible using CSS only.
Thanks,
niting
Am I correct if I assume you want the following?
#home a:hover
{
#home.background-color: #fff;
}
If so, then: no. Not without JavaScript and not even with CSS3. You cannot edit an others rule's properties.
Recursion is also not possible, as you always style that what was selected last in the rule, so typing #home a:hover styles the anchor if hovered, #home .class styles anything that has class="class" and is a decendant of #home.
In other words, recursion with CSS-selectors is not possible (or I don't know about it...)
You could try setting the hover on #home itself, but that won't work in IE(6). Unfortunately, you can't style a parent based on a child's pseudo-class. Javascript is great for this.
If you have exactly one <A> in your <DIV> then maybe you can style your <A> to have the same dimensions like the surrounding <DIV> and give the <A> the desired background.