I have an aspx page with a Masterpage containing a panel with a CssClass of menutoolbar. Within that panel I am placing objects, in this case a linkbutton with a class of SearchLink.
In my Stylesheet, I am defining
.menutoolbar a:hover { color: red }
.Searchlink a:hover { color: yellow }
When I hover over the Searchlink link it is red! This is not what I expect, the Searchlink specifically is defined as yellow, it looks like the parent container menutoolbar is overriding the color, reverse of what I would expect.
How can I make the hover effect yellow for Searchlink?
a.Searchlink:hover { color: yellow }
try doing:
.Searchlink a:hover { color: yellow!important; }
if the link class is "searchlink" you could try
a.Searchlink:hover { color: yellow; }
Alternatively you can be more specific with the rule, e.g.
a.Searchlink:hover { color: yellow;}
Or something like that.
Related
I'm trying to apply a specific color (green) on my sub-menu items when user is on the page of this specific item.
The problem is :
-All my menu items needs to be set to base color (ocher)
.header_menu {
text-decoration: none;
color: var(--lightocher);}
-So all anchors are set to same color for keeping them ocher even if visited.
.header_menu a:visited {
color: var(--lightocher);}
-So my green can't pass because he is overwritted by :visited color
.current_page_item, .current-menu-item, .current-menu-parent {
color: var(--green);}
How can I deal with this ?
Try to add also a more specific setting:
a.current-menu-parent:visited, a.current-menu-item:visited {
color: var(--green);
}
You could also add !important to the rule even though its not very good to add it in specificity context.
current-menu-parent:visited, current-menu-item:visited {
color: var(--green) !important;
}
I am using Wordpress and have the following code to style my menu items
css (the attributes I'm looking to change)
.main-nav li a {
color: #222;
}
.main-nav li a:after {
background-color: #d11e5d;
}
I have applied a custom class .btn-contact on one of the buttons so I can override its color and other attributes but I can't seem to target it. (using .btn-contact { color: red; } or .btn-contact { color: red !important; } doesn't work )
the output
Just add
.btn-contact {
color: red !important;
}
The !important should override every other value for the same property.
I don't know what the :after element is there for, but you need add the content property inside the rule, otherwise it will not render. You can also use en empty string like content: "".
My css is structured in components, each component is stand-alone.
example:
.menu {
background: black;
}
The framework I'm using sometimes adds a class to the body-tag. For example for logged in users it would look like this:
<body class="loggedIn">
<div class="menu"</div>
</body
I would like to keep the css structured inside each component. Is it possible to add a selector in less that is added before the parent? Something like:
.menu{
%loggedIn{
color: red
}
}
should give loggedIn users a red menu.
Unless I am completely missunderstanding you, and there is a possibility, then the ampersand-parent-selector is exactly what you need!
.menu{
.loggedIn & {
color: red
}
}
Should result in
.loggedIn .menu {
color: red
}
You can reference the parent selector using &: http://lesscss.org/features/#parent-selectors-feature
LESS
.menu {
background: black;
.loggedIn & {
color: red
}
}
Will compile to CSS
.menu {
background: black;
}
.loggedIn .menu {
color: red
}
I have a div with a :hover pseudo-class that applies many CSS effects to indicate to the user that they are hovering over it.
How do I disable the CSS effect when the user hovers over it by adding a .disable class?
http://jsfiddle.net/nQUSn/1/
For all browsers except IE < 9:
Change .a:hover { to .a:not(.disable):hover {
You could create a selector a.disable:hover that resets the styles on that anchor element. For example, if your a:hover css was:
a:hover {
color: red;
}
And the link color is normally blue, your disable CSS could look like:
a.disable:hover {
color: blue;
}
no need to use the ".disable" class. You can chain the :disabled pseudo-class with the :hover pseudo-class:
elem {
color : blue;
}
elem:hover {
color : lightblue;
}
elem:disabled, elem:disabled:hover {
color : grey;
}
please consider these styles:
a:link { color: blue }
a:visited { color: red }
a:hover { color: green }
a:active { color: black }
#special:link { color: pink }
And now this markup:
Normal link
Special link
I expect the "special" link to be pink while keeping the other colors. However, pink replaces the other colors.
Why is this happening? How could I fix it? Thank you.
Its aggravating...and order matters here:
a:hover{
color:green;
}
a:visited{
color:red;
}
This means that unvisited links will turn green when you hover over them, and visited links will stay red when you hover on them.
Switch:
a:visited{
color:red;
}
a:hover{
color:green;
}
This means that both visited links and unvisited links will turn green when you hover on them. I hate that the order of these properties changes the behavior; the hover style should take effect regardless.
a:link{
color:blue;
}
a.one:hover{
color:green;
}
a.one:visited{
color:red;
}
a.two:visited{
color:red;
}
a.two:hover{
color:green;
}
<a href=#ddd class=one>One (wont change color on hover when visited)</a> |
<a href=#ddd class=two>Two (always turns green on hover)</a>
I believe it has to do with CSS priority order.
Because #special is an ID, it dwarfs any element-level style applied. (This can be proven in Firefox Firebug/Chrome Inspector and how the inherited style sheets are all over-written by the ID's style).
Though, considering there is no "present style" applied for :active, :visited, etc. It would stand to reason these styles would still be un-affected. Yet, making the following change to your hover seems to kick it back in to gear:
a:hover { color: green !important; }
Why is this happening?
Styles for the :link pseudo-class apply to all links states, so it includes :hover, :visited and :active
This is what I have observed since I started using CSS years ago. I don't know if it's how it is supposed to work but it is how I have seen it working and expect it to work.
So when, you set a style for #special:link, that style also applies to #special:hover, #special:visited and #special:active
Note that the use of an ID does not change much here.
If you try it with the below CSS, you will have both links pink... even for :hover state
a:link { color: blue }
a:visited { color: red }
a:hover { color: green }
a:active { color: black }
a:link { color: pink }
How could I fix it?
You can use !important as suggested by Brad or set the various states styles for #special together with the regular links.
a:link { color: blue }
#special:link { color: pink }
a:visited, #special:visited { color: red }
a:hover, #special:hover { color: green }
a:active, #special:active { color: black }
Here is another quick way around:
You can use :not(:hover).
#special:link:not(:hover) { color: pink }
DEMO
No, it is not going to use the other colors because of its ID, in such case you should add the rest of actions and colors to the ID.
For example, the link that you have, the "special" one, when over will say.
Ok, I'm 'a' ... link ... and my ID is .. special, so, I will keep the special parameters.
That's why that's not going to change.
Hope this helps,