I have html table and layout for it (something like that, also i use haml+sass):
.zebra{
.zebra-stripe{
&.zebra1{
a{
color: red;
}
a:hover{
color: blue;
}
}
}
my htm table has class zebra, and tr has class .zebra-stripe .zebra1
but there i have link with other style (like button) and this link has own height with background, but color is setted to orange on hover,
.details-link{
width: 70px;
margin: 2px;
}
.details-link:hover{
color: orange;
}
but when my mouse is over this link it's color is not orange, but blue as setted for table.... what is wrong?
How to set link hover text color to orange (i setted it, but it is not viewing properly)....
If something is not clear write me in comments...
You problem is the specificity of the selectors you're using, .zebra .zebra-stripe.zebra1 a:hover is more specific than .details-link:hover. Try the following instead to make your selector more specific:
.zebra .zebra-stripe.zebra1 a.details-link:hover {
color: orange;
}
Try out this:
a.details-link:hover{
color: orange;
}
Related
Each of the links on my website has a unique color, which is defined within the style argument within each <a> tag. I want to be able to change the background color of each link on the page to aqua and change the text color to white on hover. However, because of the separate color per link, the text color does not change and is overwritten. How can I get around this?
Here is my code:
a {
color: black;
}
a:hover {
background-color: aqua;
color: white;
}
About<br>
How this site was made<br>
Upcoming Changes & Changelog<br>
Edit: To clarify, I want the links to remain the color they are, but I want them to change to white on hover, and change back on non-hover. The highlight color change already works.
Use CSS variables instead of inline color so you don't have to deal with !important and specificity issues:
a {
color: var(--c,black);
}
a:hover {
background-color: aqua;
color: white;
}
About<br>
How this site was made<br>
Upcoming Changes & Changelog<br>
You can use the !important property so it overrides the inline style
a {
color: black;
}
a:hover {
background-color: aqua;
color: white !important;
}
About<br>
How this site was made<br>
Upcoming Changes & Changelog<br>
Use the !important property to override all other declarations:
a {
color: black;
}
a:hover {
background-color: aqua;
color: white !important;
}
About<br>
How this site was made<br>
Upcoming Changes & Changelog<br>
I'm trying to make an :active style on my "a" tags, but on a mobile phone it's not the same, that I wrote.
I have done the following:
a {
display: block;
background-color: lightblue;
width: 100px;
color: black;
}
a:active {
background-color: skyblue;
}
It should do the following:
Have "a" tags, that are have a light blue background and when I tap on it it's background color change to sky blue. Yes it happens, BUT if I add a href="ANYTHING", then, when I tap on it it's background color is a bit darker, than sky blue, and the text's color changes to a bit blueish.
Sorry for my English, I tried my best.
You probably need to set custom styles for the rest of the pseudo classes that are related to the element: https://developer.mozilla.org/en-US/docs/Web/CSS/:link
Try adding visited to the list like this:
a:active, a:visited {
background-color: skyblue;
}
This question already has answers here:
HTML default link color
(3 answers)
Closed 7 years ago.
If I have a <div>, I can control its color like this:
<div class="good">Hello</div>
.good { color: green; }
I want to do the same thing for links, like this:
Hello
.good { color: green; }
I want the link to be green, even when mouse hover happens, like the <div>. I know I can do this:
.good:hover { color: green; }
But that means I have to remember to add that for every single class that may be applied to <a> element. Is there a simple way to disable hover color change for <a>? I'm thinking about something like:
a:hover { color: do-not-change; }
or:
a:hover { color: inherit-from-non-hover; }
Update
I forgot to mention that I did set global a and a:hover to override the browser default:
a, a:hover { color: black; text-decoration: none; }
This is because I don't know how to disable hover color. Ideally what I want is:
a { color: black; }
a:hover { color: <some way to tell it to not change>; }
.good { color: green; }
Then <a> is black, hover or not. And <a class="good"> is green, hover or not.
You can use inherit or initial property, but that will lead into black color on hover or what ever color property is applied to the immediate parent element of the anchor tag .
a:hover{
color: inherit; /* Inherits color property from its parent */
}
a:hover{
color: initial; /* Takes initial value of the property which is black in this case */
}
Several ways to do this...
Create a new class that can be used on any element where :hover might be a different color:
<div class="good nochange">Hello</div>
Hello
.nochange:hover{
color:inherit;
}
Add it to your class good:
Hello
.good:hover{
color:inherit;
}
Or apply it to all links:
Hello
a:hover{
color:inherit;
}
I got 4 divs and want to style them like this:
http://jsfiddle.net/AcvbG
HTML:
CSS:
#topleftbox {
background: red;
background-repeat: no-repeat;
width: 229px;
height: 228px;
float: left;
}
#topleftbox:hover {
background: blue;
}
#topleftbox:active {
background: green;
}
#topleftbox:visited {
background: yellow;
}
But replace the colors with background images. The :hover works, but :visited and :actived arent taking effect.
Anyone knows the solution? I got limited knowledge in javascript so i hope there is a way to work around this.
Your :visited and :actived pseudo class wont be visible within jsFiddle since the href="http://test". So, you need to visit the page test to see :visited in action .. AND you need to be on test page to see :active in action.
Here i made a fiddle for you
You can see where .css differs
.topleftbox:hover {
background: blue;
}
.topleftbox:visited {
background: yellow;
}
.topleftbox:visited:hover {
background: pink;
}
.topleftbox:active {
background: green;
}
Also, you should give a check to the ORDER in witch you define your styling.
a:link { color: red } /* unvisited links */
a:visited { color: > blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links */
Note that the A:hover must be placed after the A:link and A:visited
rules, since otherwise the cascading rules will hide the 'color'
property of the A:hover rule. Similarly, because A:active is placed
after A:hover, the active color (lime) will apply when the user both
activates and hovers over the A element.
An example of combining dynamic pseudo-classes:
a:focus { background: yellow } a:focus:hover { background: white }
The last selector matches A elements that are in pseudo-class :focus
and in pseudo-class :hover.
In modern browsers, CSS can handle what you want without the use of javascript.
http://jsfiddle.net/CWkdY/10/
One thing to notice is that your identifier could benefit from discerning that your ID is a link by adding 'a' in front of your id declaration. Also your initial definition would benefit from 'display:block'. Like this:
a#topleftbox {
background: url('http://d241yswl6yg9sc.cloudfront.net/linen-texture2/top-new.jpg');
width: 229px;
height: 228px;
float: left;
display:block;
}
If you notice your images are initially not showing, try caching all the images you need to use with this little trick. Where you have a div with all the images, off the the side, but hidden.
http://perishablepress.com/css-image-caching/
I am using a bit of HTML in my IPhone application. I don't have much idea about HTML.
When we touch any hyperlink(ahref in HTML) there is a blue selection color that appears in "li" which contains ahref. How can we disable it?
You can override the behaviour by specifying your custom color for links via css:
a { color:green; }
Or based on their status eg active, clicked, etc:
a:active { color:green; }
a:visited { color:red; }
a:hover { color:orange; }
I'm not 100% sure, but if the text is truly being selected, and you're seeing a blue color, then the fix would be to apply a style like this:
li::selection {
background-color: transparent;
}
li::-webkit-selection {
background-color: transparent;
}
li::-moz-selection {
background-color: transparent;
}
That's only if it truly is a selection that's occuring. Mind you, only the ::selection and maybe the :-webkit-selection could possibly apply to an iPhone. ::-moz-selection would be for a Firefox browser.