I'm trying to build my first site and am trying to use the "a:hover" feature in CSS but can't get it to work - the links look the same whether hovering or not.
Here's a snippet of my CSS file:
/* main page elements */
a:link
{
text-decoration: none;
color:white;
}
a:visited
{
text-decoration: none;
color:FFFFFF;
}
a:hover
{
text-decoration: none;
color:blue;
}
a:active
{
text-decoration: none;
color:blue;
}
Any help appreciated.
Thanks,
Robert.
You need to finnish the text-decoration instruction :P
text-decoration: none;
or
text-decoration: underline;
I hope you need to change the color in hover state
Try something like this one
eg.
HTML
<a href ='#'> Hover Me </a>
css
a
{
text-decoration: none;
color:#000000;
}
a:hover
{
color:#3399FF;
}
Your might be transitioning from a:active to a:hover, which has the same color. Therefore you see no difference. Try setting a unique color for a:hover, and see what happens.
It would also help if you make a jsfiddle.
Your issue is in the text-decoration: parts, if you remove them or use a valid syntax your CSS should work.
Related
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;
}
From the chrome debugger:
element.style {
}
#title a:link,a:visited,a:hover,a:active {
color: #FF33CC;
text-decoration: none;
}
(Everything below this is struck through)
nav a:link,a:visited,a:hover,a:active {
color: #000000;
text-decoration: none;
}
nav a:link,a:visited,a:hover,a:active {
color: #000000;
text-decoration: none;
}
#title a:link,a:visited,a:hover,a:active {
color: #FF33CC;
text-decoration: none;
}
#title a:link,a:visited,a:hover,a:active {
color: #FF33CC;
text-decoration: none;
}
I'm trying to figure out why an element (title) is not showing up properly. This is what it looks like in the html body:
<div id="title">
link
</div>
I understand that when it's struck through, that style isn't being applied. What I don't understand is
a) Why is the nav style being called at all?
b) Why does the title style for links get called several times? The first time it seems to work, but the second time it's being struck through? (On the website, the element currently is only showing up in black text.)
Thanks in advance!
Your style is being called because the nav parent only applies to the first part of the selector. Basically you have this:
nav a:link,
a:visited,
a:hover,
a:active{
//style
}
What you really want is:
nav a:link,
nav a:visited,
nav a:hover,
nav a:active{
//Style
}
The same thing goes for the #title a:link, a:visited, a:hover, a:active
My guess on why it is trying to use the same CSS multiple times would be that you have the same CSS in multiple places. E.G. you are either
Importing the CSS twice
Importing two CSS files with a duplicate style
Duplicating the CSS in your one CSS file
Check the associated line numbers and see if they are the same (meaning it is actually using the exact same CSS twice) or different (meaning you have the same CSS in multiple places).
you have:
#title a:link, a:visited, a:hover, a:active {
color: #FF33CC;
text-decoration: none;
}
but what it seems like you need is:
#title a:link, #title a:visited, #title a:hover, #title a:active {
color: #FF33CC;
text-decoration: none;
}
the id tag has to appear after each comma, otherwise you are styling ALL links, not just the ones with the #title id.
Hope that helps!
I am in the process of replicating the Google homepage (for practice) and am running into a few problems.
Here is my jsfiddle: http://jsfiddle.net/sdaless/kTn7j/
I am trying to make my text color: white, and text-decoration to none. No matter where I put these two commands, they do not change. I don't know if I am having an inheritance issue or what my problem may be. From my understanding, I thought I could put:
color: white;
text-decoration: none;
in either my #nav-container id or #navlist.
Both removing the underline and making the text color white apply to the anchor tag
ul#navlist li a{
color:#fff;
text-decoration:none;
}
try this
#nav-container ul li a{
color: white;
text-decoration: none;
}
DEMO
When making list-based menus, all styling that is not position-related should go on the A-tag, not the LI and use display:block.
You need to change this selector:
#navlist li
To this (target the a tag)
#navlist li a
The text is present inside the anchor tag, hence the css should be applied for the a tag. Try this css
#nav-container {
background-color:#000;
}
#navlist li {
display: inline;
list-style-type: none;
}
#navlist li a{
color:#fff;
text-decoration:none;
}
check this fiddle : http://jsfiddle.net/Kritika/KnS8s/
I have css:
a:visited {
text-decoration: none;
color: #CCC;
}
a:hover {
text-decoration: underline;
color: #fff;
}
a:active {
text-decoration: none;
color: #CCC;
}
the hover does not work when i first load the webpage however when i click on the hyperlink then go back the hover then works. What is the issue.
Maybe there is some extra CSS hanging around somewhere... You could try resetting CSS at the beginning of your file:
a:visited, a:hover, a:active { text-decoration:none; }
Test your code at the seperate page of your project, I think it works, if it works, there is something else in your project that makes it incorrect, I mean external css
Simple question: I have the following markup...
<a href='#'>
<img src='icon.png'> This is the link
</a>
I want to have the text become underlined on mouseover.
What is the CSS selector for selecting only the text in that <a> element and nothing else? I'd rather not wrap it in anything if I don't have to.
a:hover {
text-decoration: none;
}
a:hover <select_text_here> {
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a img{
text-decoration: none;
}
should do it. This way all the img tags inside a will be without any underline.
The text would have to be in its own element in order for it to be selectable in CSS. You'd have to use a span or similar:
<img src="" /><span class="link-text">Foo</span>
Obviously you can then just use .link-text to select it.
Since the text doesn't have any separate "handle" that you could select, the best you can do is underline the whole a tag, which includes the image. The image itself will not be underlined technically, so you can't even "un-underline" it.
You'll either have to separate the image from the text, or wrap the text in a span and only highlight that.
I see that Opera/IE doesn't underline the image, but FF does. The easiest way to fix it is to add span element:
<img ... /> <span>...</span>
And then apply text-decoration to span element:
a:hover span {
text-decoration: underline;
}
As far as I know you're not able to select the text only.
Perhaps try this :
a:hover {
text-decoration: underline;
}
a:hover IMG {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:hover img {
text-decoration: none;
}
another thing you could do is
a{
background: url(icon.png); background-repeat: no-repeat; padding-left: 10px
}
or similar, so you don't have to have the image element in the link