Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I've set the following default styles for my main site links:
a {
color: #000;
text-decoration: none;
}
a:visited,
a:focus,
a:active {
color: #000;
}
a:hover {
color: red;
}
a:focus {
outline: thin dotted;
}
a:hover,
a:active {
outline: 0;
}
When styling other links, I've followed the same pattern, e.g:
.button {
color: #fff;
background: #000;
}
.button:visited,
.button:focus,
.button:active {
color: #fff;
}
.button:hover {
color: #000;
background: #fff;
}
Is it necessary to include focus outline styles for other links or will the browser fall back to my defaults? I understand that having correct focus styles will aid accessibility.
If the :focus pseudo class on your 'classed' links should not be different from your main links, there is no need to declare it again.
Related
I have used the following color for css.
a:link,
a:active {
color: #e67e22;
text-decoration: none;
padding-bottom: 1px;
border-bottom: 1px solid #e67e22;
}
a:active,
a:hover {
color: #555;
text-decoration: none;
padding-bottom: 1px;
border-bottom: 1px solid #e67e22;
}
This is the corresponding html
#omnifood_berlin
But the color being displayed or computed is different as shown below.
What can be a reason for this? How can I make it the color I specified?
First, add this as mentioned in my comment:
a { color: #e67e22; }
Also note that you have active twice, as mentioned in a comment. Next, read through the official docs https://www.w3schools.com/css/css_link.asp particularly this bit
When setting the style for several link states, there are some order
rules:
a:hover MUST come after a:link and a:visited a:active MUST come after
a:hover
Follow those rules and I think your problem will be resolved.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm trying to build a website but for some reason my a:hover is not working. When I hover nothing happens. I need some help.
My jsfiddle: https://jsfiddle.net/LfaLt1db/
Thank you in Advance!
Because you have .main-content a structure in yor HTML, and .main-content li a in your CSS. Just remove `li
.main-content a:hover, .sub-content a:hover {
text-decoration: underline;
background-color: #008080;
}
Or add
a:hover {
text-decoration: underline;
}
to your CSS file.
change your
.main-content li a:hover, .sub-content li a:hover {
text-decoration: underline;
background-color: #008080;
}
css code to
.main-navbar li:hover, .sub-navbar li:hover {
text-decoration: underline;
background-color: #008080;
}
Just asked a similar questions but turned out i overlooked where i placed the tag. It was fixed but created another issue.
Added a style to the hover of the links whereby a border appears upon hover:
.navbar-default .navbar-nav > li > a:hover {
padding: 5px;
color: white;
border-bottom: #16b2d9 solid 3px;
}
All works fine however, is there a way to make the border length adjust depending on the length of the text?
You could use an underline instead of a bottom border:
.navbar-default .navbar-nav > li > a:hover {
padding: 5px;
color: black;
text-decoration:underline;
}
http://jsfiddle.net/gratiafide/goLk6gcf/3/
I'm just starting to learn HTML and CSS and was testing out some simple CSS when strange things started happening.
Here is my CSS.
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: purple;
text-decoration: dotted;
}
a:hover {
color: blue;
text-decoration: dotted;
}
a:active {
color: blue;
text-decoration: dotted;
}
a:hover and a:active do not always do what they're supposed to. It's really confusing me because if I change the blue in a:hover's color: blue; to black it suddenly works.
I am editing the HTML and CSS files in Visual Studio 2012 and opening them in Google Chrome from the Dropbox folder they're saved in.
How can you differentiate between a:link and a:hover? Normally, it's a:link that's blue. Now, when you hover over it, it's a:hover that's also blue. Changing a:hover to black will let you see the difference.
A few things to consider:
In order for a:link to work you have to include a an actual link (href="somewebsite"). Otherwise you should be targeting just the a.
A lot of people think the active state is after you clicked on it thus making it "active" but it's on mousedown. Click the link and hold the mouse to see the :active triggered
In your example you have a:link AND a:hover set to blue so you will see no change when you hover over it.
text-decoration: dotted is not a property. You can choose from none, underline, overline, line-through, initial and inherit
EXAMPLE
a:link {
color: black;
text-decoration: none;
}
a:visited {
color: purple;
}
a:hover {
color: green;
text-decoration: underline;
}
a:active {
color: red;
text-decoration: line-through;
}
I do not have it set up anywhere in the stylesheet for hovering a link to be #EEEEEE, I am wanting the navbar hover to be the same color as the navbar background so that you can't see any difference when it is hovered.
Here is my current stylesheet: Pastebin
Here is a demo of the site as it currently stands:
Link
That's the default hover state of Bootstrap:
.nav>li>a:focus, .nav>li>a:hover {
text-decoration: none;
background-color: #eee;
}
You already have a selector that can override this, just include the background property:
#header a:hover {
color: #fff;
text-decoration: none;
background:none;
}
Add this to your stylesheet.
ul.nav a:hover { color: #fff !important; }