I have the following HTML:
Bioshock 2<span> - Xbox 360 review</span>
I'd like to style the first part of the link in one way and the span in another, like this:
I've managed to do this, using the following CSS:
a {
text-decoration: none;
}
a span {
color: #c8c8c8;
}
a:link,
a:visited {
color: #787878;
}
a:hover,
a:active {
color: #fff;
background-color: #a10000;
}
However, it doesn't work as expected when I hover over it:
I'd like the entire link to have the same hover effect and not have the span keep its colour. I'd also like this to happen whether you're hovering over the span or the rest of the link. The desired effect would look like this:
Any ideas how I could do this?
Try:
a:hover, a:active, a:hover span {
// ...
}
instead of:
a:hover, a:active {
// ...
}
Add this css code to it:
a span:hover {
color: #fff;
background-color: #a10000;
}
And here is the demonstration. :)
Related
I have all links on my site underlined when hovered using the following css:
a:hover {
text-decoration: underline;
}
How can I make a class which will override this?
.footer {
text-decoration: none;
}
Your second selector is less accurate than the first one, therefore it's the first one that is applied.
Plus, you shouldn't target such a wide selector (.footer) in order to only style your links. What you should do is:
.footer a:hover{ text-decoration: none; }
(As I assume that default a state doesn't have a text-decoration: underline;)
This code seemed to fix it although it wasn't working earlier:
a:hover {
text-decoration: underline;
}
.footer a{
text-decoration:none;
}
I'm trying to edit a menu in wordpress but I can't seem to give the current page menu item the background colour that I want (highlight effect).
When I put in this bit of css...
ul#menu-menu-1.nav.navbar-nav a {
background-color: #FFFFFF;
z-index:9999999;
}
...the link background went white (which is what I wanted). Then I added this:
ul#menu-menu-1.nav.navbar-nav a:hover {
background-color: #34676b;
}
ul#menu-menu-1.nav.navbar-nav a:active {
background-color: #34676b;
}
The a:hover works, but a:active doesn't. Next I tried...
.current_page_item and .current_page_item a:active
...but nothing works, the code below is what I have now and it doesn't work either. Any help will be much appreciated, hopefully all css (I don't know php).
Thanks,
Lisa
ul#menu-menu-1.nav.navbar-nav {
padding-top:30px;
}
ul#menu-menu-1.nav.navbar-nav a {
background-color: #FFFFFF;
z-index:9999999;
}
ul#menu-menu-1.nav.navbar-nav a:hover {
background-color: #34676b;
}
ul#menu-menu-1.nav.navbar-nav li.current_page_item a:focus {
background-color: #34676b;
}
li#menu-item-14.menu-item.menu-item-type-custom.menu-item-object-custom.current-menu- item.current_page_item.menu-item-home.menu-item-14.active {
background-color: #34676b;
}
If I understand this right, you just want to highlight the current page link?
If so:
li.current_page_item a {
background-color: #34676b;
}
Should work.
It searches for the active <li> and then styles the <a> inside it.
I had almost the same problem and I used the following code to solve it.
li.current-menu-item a {
background-color: #34676b;
}
And just in case you want to change the color of the text once the item menu is selected:
li.current-menu-item a {
color: #34676b;
}
I'm trying to style all elements before hovered (from the left side).
Here is my code: jsFiddle
[CSS]:
a,
a:link,
a:hover,
a:visited {
/* ... */
color: #222;
}
a:hover,
a:hover ~ a {
color: #f00;
}
[HTML]:
text1|
text2|
text3|
All I've done is hovering from the right side (after hovered element), but I want it from the left.
A small change with the html and css can satisfy your requirement.
HTML:
<div>this/line/is/hovering/from/left/<div>
CSS:
a,
a:link,
a:hover,
a:visited,
div {
text-decoration: none;
font-size: 14pt;
background: #def;
color: #222;
}
div:hover a{
color: #f00;
}
a:hover ~ a {
color: #222;
}
jsFiddle
Do you want to style all elements differently?
you can select elements by nth-child selector.
Example:
a:nth-child(1){}
a:first-child+a{} or a:nth-child(1) + a /* Second Element */
a:last-child{} /*select last child, Works in ie8+, webkit, moz, o */
My CSS has , in the following order:
B, STRONG
{
color: #333;
}
A
{
color: #00ae9d !important;
border-bottom: dotted 1px #00ae9d;
text-decoration:none;
}
But when I hold a link, it comes up gray with green dots. What do I need to do so that bolded items come up dark gray, and linked bolded items come up green with dots? Is there a way to rank each rule?
The behavior will depend on the order that you're setting your tags
<b>One</b>
is not the same as
<b>One</b>
Check this jsfiddle
to give color to a <a> you need to do follow LoVe HAte rule:
L(link)o*V*(visited)e H(hover)A(active)te
a:link {
color: #00ae9d;
}
a:visited {
color: #999;
}
a:hover {
color: #900;
}
a:active {
color: #555;
}
a:focus {
color: #900;
}
off course you can group them, but you have to keep the same order.
a:link, a:visited {
color: #00ae9d;
}
a:hover, a:active, a:focus {
color: #900;
}
I've a button and I wanted to know if it is possible to make the css bellow shorter.
.button a:link, .button a:visited, .button a:hover, .button a:active {
color: #000;
text-decoration: none;
}
I mean maybe:
.button a:* {
color: #000;
text-decoration: none;
}
Maybe there isn't any shorter way, but I just wanted to know.
I found something like this out:
.button a:link:visited:hover:active {
color: #000;
text-decoration: none;
}
But it wasn't working, don't know why..
For information - I've general css for a in the top of the file:
a:link {
color: #DA5632;
}
a:visited {
color: #CE3408;
}
a:hover {
color: #289BF8;
}
a:active {
color: #CE3408;
}
So the button class a should overwrite the main a css.
.button a is all you need
I always set a default style on a, and target pseudo classes only when I need to have a different effect.
Edit to include fix from comments:
Because a default style for the a element is declared like:
a:link {
color: #DA5632;
}
a:visited {
color: #CE3408;
}
a:hover {
color: #289BF8;
}
a:active {
color: #CE3408;
}
at the top of the stylesheet, we need to make it body .button a by increasing selectivity we increase the importance of the styles applied.
Here are some things to try
make sure that your stylesheet has a rule for ".button a" - also make sure this stylesheet is included after the global one defining rules for "a".
If that doesn't work, try being more specific, as in: ".button > a", only selecting direct descendants.
If THAT doesn't work, while it's bad practice, you could always mark your styles as important, like so:
color: #fff !important;
this will demand that they are parsed last.