I have some HTML markup in my ASP.NET master page representing a basic navigation menu. THree words that link to three pages. My CSS and HTML are included below for your reference.
When I load the page, the links appear with the correct color (red). If I hover over a link, the link changes to the correct color (blue). So far, we're good. Clicking a link changes the link color to the correct color (yellow). The two remaining links are still red / blue as expected. Clicking a second link changes that link to yellow also. Now I have two yellow links. Neither yellow link displays the hover color (blue) like I'd prefer. Clicking the third link causes it to be yellow, too and none of the links display the hover style.
Although a link has been clicked, I'd like the color to be stored and have the hover color displayed. How do I accomplish this? This is an ASP.NET web application project but I'm only using straight HTML at this point.
/* --- css --- */
a:link
{
color: red;
text-decoration: none;
}
a:hover
{
color: blue;
text-decoration: none;
}
a:active
{
color: green;
text-decoration: none;
}
a:visited
{
color: yellow;
text-decoration: none;
}
/* --- HTML --- */
<p class="MenuItems">
Cars.
Trucks.
Vans.
</p>
As described here, the :hover declaration must come AFTER the :visited and :active declarations.
Basically, in the cascade of your current styles, you won't ever see the :hover color.
Your
a:hover
declaration must come after your
a:visited
declaration in the stylesheet because the visited state is currently taking priority. Always put hover at the end of the a styles declaration block to prevent this.
a:link -> a:visited -> a:active -> a:hover is the optimal ordering.
Just use this:
a:hover
{
color: blue ! important;
text-decoration: none ! important;
}
or as described - use this order:
a:link
{
color: red;
text-decoration: none;
}
a:active
{
color: green;
text-decoration: none;
}
a:visited
{
color: yellow;
text-decoration: none;
}
a:hover
{
color: blue;
text-decoration: none;
}
Related
I am trying to change the colour of the font which appears in images in gallery pages such as this page on the site.
I would like to change the text below each image (such a Trail Necklace 111) from #666666 to #007faa.
I used the web inspector to identify that this is an H4 tag in a div class called portfoliotitle_3
It is also a link so altogether I've updated the following parts of the CSS, saved the CSS and refreshed the page a few times but the text colour doesn't change.
#contentwide .portfoliotitle h4 {
color: #007faa;
}
.portfoliotitle a,
.portfoliotitle a:visited {
color: #007faa;
}
#contentwide .portfoliotitle_3 h4 {
color: #007faa;
}
.portfoliotitle_3 a,
.portfoliotitle_3 a:visited {
color: #007faa !important;
}
.portfoliotitle_3 a:hover {
color: #007faa;
text-decoration: none !important;
}
I must be missing something very basic and if anyone can take a fresh look and give me some pointers, that would be very appreciated.
Many thanks
i think Thats because the page load style.css of the page after each reload
It's because of an anchor tag that has some important in color.. so you should probably change the anchor tag to change the color.
.portfoliotitle_3 a, .portfoliotitle_3 a:visited {
color:#007faa !important
}
Cascading is apply for the element a. You can delete this code in internal css style element.
.portfoliotitle_3 a, .portfoliotitle_3 a:visited {
color: rgb(85, 212, 255) !important;
}
I've got a CSS prob i'd love some help with.
My site (www.melodylakerart.com) has a 'Read More' link in its cookie notice bar (to the right of the privacy notice).
The 'read more' link is currently only visible on mouse over. Since the cookie bar is black I therefore assume the link text is black untill mouseover
I just want to make the text a colour other than black so you can see the link without having to mouseover. I've tried the below CSS with no luck. Can anyone help?
.cn-more-info .cn-privacy-policy-link .cn-link .button {color: #feb8b4 !important;}
.cn-privacy-policy-link {color: #feb8b4;}
.cn-more-info .cn-privacy-policy-link .cn-link .button {color: #feb8b4;}
Link color can be changed via a:link or under a specific class
.cn-privacy-policy-link a:link
for example:
a:link {
color: red;
text-decoration: none;
}
a:visited {
color: green;
}
a:active {
color: black;
}
a:hover{
color: #bada55;
}
.test a:link{
color: yellow;
}
Example
<div class="test">Yellow link</div>
You can also change the link color on hover by a:hover or the link color after being clicked by a:visited or while being clicked with a:active
The problem is that you have this:
input[type="submit"], button, .button {... color: #000000!important; ...}
And that is the classic reason why !important is a bad practice.
If all other parts work as expected, you need to trigger one of the element's classes. For instance: cn-privacy-policy-link {color: #feb8b4!important;} will work.
Why aren't my hyperlinks changing colors or underlining? I have in my CSS in a standard VS 2010 site:
a:link, a:visited
{
color: #034af3;
outline: none;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
outline: none;
}
a:active
{
color: #034af3;
outline: none;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
What am I doing wrong? Am I in the wrong spot? Thanks!
First thing to do is rule out that there are no other style rules being applied later that override yours, or none earlier that are more specific (or use !important) which will not be overridden by your styles.
Also make sure your CSS is in the right place within the HTML.
Make sure there are no other elements, such as a span, within the link that might have styles applied to them which are overriding the a styles.
There are a multitude of other debugging steps to take, but I hope this gets you pointed in the right direction.
You have it set to not display any text-decoration on hover.
With Hover Decoration:
http://jsfiddle.net/KbZNb/
Without Hover Decoration:
http://jsfiddle.net/KbZNb/1/
It looks like it is changing color, but only slightly due to the color similarities of #1d60ff and #034af3
The colors are nearly the same that's why you didn't see the changes. Change the a:hover to #ff0000 and see the outcome
a:hover {color:#ff0000}
Ok so I have the follow menu:
<div class="header">
<div id="logo"></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
Associated with this CSS class:
.header {
margin:20px 0 55px;
height:68px;
width:inherit;
}
What can I put in my menu tag or my CSS class to make the link not change colors when it is clicked. Currently the link will be blue but once it has been clicked it turns purple. I want it to be say black all the time, clicked or not.
No better way than to quote the specs:
a:link { color: red } /* unvisited links */
a:visited { color: blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links */
a:active { color: gray } /* when element accepts tab focus */
http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes
So this should cover all cases:
.header a,
.header a:link,
.header a:visited,
.header a:active,
.header a:hover {
color: black;
}
http://jsfiddle.net/ZgUZn/1/
Joerg noted in a comment below the question that I omitted :focus. I did, and for a reason, but I'll note why and you can consider if you need it or not:
.header a:focus {
color: white;
background: blue;
font-size: 2em;
}
http://jsfiddle.net/ZgUZn/5/
Go to that link, click in the white part of the page in the bottom, right quarter, then hit the TAB key. You'll see that when that element receives focus, it changes. You can cover that by including this psuedo-class, but it's my understanding that browsers do not have a default setting for this, so unless you set it somewhere else and you need to cancel it out, it might be unnecessary.
NOTE: I seem to remember in the back of my mind recently I found out that just .header a may also work, but honestly I'm not sure how, and I've always understood the above is how it should be done (belt-and-suspenders notwithstanding). Comments welcome on this point.
EDIT
As to the above note, I think I've got an answer:
a,
a:link,
a:visited,
a:hover,
a:active {
background: green;
color: white;
font-size: 2em;
}
.header a {
color: black;
}
http://jsfiddle.net/ZgUZn/6/
The .header a does not override all of the psuedo-selectors if they have been declared elsewhere. Now, if there aren't any others declared, it appears to work in overriding the browser's defaults, but that may be a false-positive.
That's the default colors assigned by the browser for visited and unvisited links. If you don't want it to change then just style the anchor tags.
.header a {
color: black;
}
i have a a:hover for all my links on my page:
a:hover {
background-color: blue;
text-decoration: underline;
color: black;
}
but but there are specific ones in a div that i don't want anything to happen when you hover over them, so can i do something like this?
#what_we_offer a:hover {
background-color: none:
text-decoration: none;
color: none;
}
basically i don't want it to do any of the above when it hovers over them specific links.
thanks
Yes that should work fine, although you likely don't want to set none unless you really don't want any style... setting your base colors etc. should work fine.
#what_we_offer a:hover {
background-color:#fff;/*presuming was originally white*/
text-decoration:none;
color:#000;/*presuming was originally black*/
}
PS I'm not sure if it was just a typo, but your original background-color:none: line was terminated with a colon vs. a semi-colon thus it would have caused issues.
#what_we_offer a:hover {
background-color: transparent;
text-decoration: none;
color: none;
}
use transparent instead of none, that works.
thanks for all the answers.
Rather than using id with css use Class
/* for link where you want to change color on hover */
.Link a:hover {
background-color: none:
text-decoration: none;
color: red;
}
/* for link where you dont want to change color on hover */
a:hover {
background-color: none:
text-decoration: none;
color: none;
}
When you want to override CSS values you can do two things: adding new CSS declarations after the one you want to override or using "!important"..
So for your problem you can try:
a.reset:hover {
background-color: #FFFFFF;
text-decoration: none;
color: #000000;
}
.. and then add the links you want to override this new class:
Link with reset
But this CSS class must be declared after you normal "a" tag declarations or this won't work.
Another way is to use !important but I recommend not to abuse this one. But for overriding it's the fastest and safest way to be sure it will work:
a.reset:hover {
background-color: #FFFFFF !important;
text-decoration: none !important;
color: #000000 !important;
}
.. and this one you can add anywhere in your CSS file and any link with the "reset" class will get those styles: white background, no text decoration and black text.
Oh and for the background you cand try: background: none; and will clear all background styles.. background-color, background-image, etc
As a side note.. id's are used to reference a single element and it must be unique.. and classes are used to reference multiple elements. Multiple uses of the same id as you would use a css class.. you can brake javascript and it won't validate your HTML.
Yes but beware that a:hover{} should come before #what_we_offer a:hover {}.
I think if you do the reverse of what Pranav said, you can have less modifications i,e
/* for link where you ***DO*** NOT want to change color on hover */
.Link a:hover {
background-color: none:
text-decoration: none;
color: red;
}
/* for link where you want to change color on hover */
a:hover {
background-color: none:
text-decoration: none;
color: none;
}
so you need to add class for a href s in some particular DIVs
You can make use of CSS selectors. The best thing I think you can do is to use the selector not. Let me show you an example:
<html>
<head>
<style type="text/css">
a:not([not_custom]){
background: #00FF00;
color: #FF0000;
}
</style>
</head>
<body>
<div>
Test 1
Test 2
Test 3
Test 4
Test 5
Test 6
</div>
</body>
</html>
As you can see, I'm defining the a style using the not selector. So, I'm saying that I want to put a green background and a red color to all the a that doesn't have the attribute not_custom. As a result of this, you can see that Test 1, Test 3 and Test 5 will have the style defined and Test 2, Test 4 and Test 6 will be normal, without the style.
NOTE: you can define the attribute you want. You don't have to named not_custom. It can be called whatever if you want.
a:hover {
background-color: none:
text-decoration: none;
color: none;
}
This is correct.
If you want only particular page, add
body-id a:hover {
background-color: none:
text-decoration: none;
color: none;
}