I have this CSS code for links on my site:
a { text-decoration:none; color:#2B5384; }
a:hover { color:#F90; }
a:visited { color:#2B5384; }
It works fine if the link looks like that: My page - the color of the link is dark blue, on hover it changes to orange and the underline appears.
However, if I link to external website, for example My page - on hover the link doesn't change the color and no underline appears. It works if I change the URL to have the .html extension - My page, but, obviously, there's no such page.
Why is it happening and how can that be fixed?
see http://www.w3schools.com/css/css_pseudo_classes.asp especially the notes :
Note: a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective!!
Note: a:active MUST come after a:hover in the CSS definition in order
to be effective!!
Note: Pseudo-class names are not case-sensitive.
Here's the official w3c take on it http://www.w3.org/TR/CSS2/selector.html see section 5.11.3
Related
I am trying to override the classic blue colour of my links in my CSS file, but none of the options found on the web seem to work for me. I've also checked my cache so it's not that the changes don't appear. I'm checking in IE, Firefox and Chrome.
I tried:
a:link { color:red };
AND just in case:
a:link { color:red; }
OR:
a {
text-decoration: none;
}
No impact whatsoever.
I'd add a:
a:visited { color: red };
I am supposing you'd visited that links before; in that case empting cache has no effect....
Anyway difficoult to guess without the code.
Ok i fixed your Fiddle to make it work
https://jsfiddle.net/ehoav3oz/6/
There were severals sintax errors; fixed both CSS and HTML
I have a blog but most text seems to get underlined automatically. I am trying to find the text-decoration: underline but I can't seem to locate it. This is my blog
www.latestforpc.com
This is the line that causes the underline but I can't find it in style.css
a:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
Web browsers are designed to add default styling to page elements even without that styling being explicity mentioned in the page's stylesheet. In order to change this default behavior, you have to add this code to style.css:
a { text-decoration: none; }
This will overwrite the browsers default styling for your links, and in this case, remove the underline.
If you inspect a link in your browser, like you did, you can find that style, and it also shows you in which CSS file the style is declared.
In this case it says 'User agent stylesheet'. That actually means that it is a default style in your browser (the stylesheet that is built in into your user agent). So that's why you cannot find it.
Now, to fix it, you can add a rule to style.css that overrules this default style:
a {
text-decoration: none;
}
That should be enough. The styles in your css file have higher priority than the defaults of the browser.
Just add the following at the bottom of your CSS;
a {
text-decoration: none;
}
and if you want your links to appear underlined when hovering over them, also add;
a:hover {
text-decoration: underline;
}
Done!
It looks like you have multiple style sheets on your site, so that style could be in any of the style sheets. You might try adding the following in your master css file to override the other style sheets:
a { text-decoration: none !important;}
There are many "browser stylesheets" in browsers like user agent stylesheet in chrome. They are pretty good but sometimes we need to get rid of them. So we use "reset.css"
Or you can only add
* {text-decoration:none;}
if you just want to get rid of the underline
Why does every control on IE gets wrapped by dots when it gets focused?
I'm using Bootstrap, I didn't edited the style scripts, they are default.
The textbox from Google it's very similar to my textbox, but it does not get wrapped by dots.
How can I hide these dots?
Here's the screenshot that shows the issue:
http://i.stack.imgur.com/bMw7y.png
It can be removed using outline:0; in your CSS
a, a:hover, a:active, a:focus {
outline:0;
}
More information on CSS-tricks: http://css-tricks.com/removing-the-dotted-outline/
I am trying to highlight the current menu item in wordpress. I have tried the following code:
#menu-menu li.current-menu-item a { background-color:#d9707a; }
#menu-menu li.current_page_item a { background-color:#d9707a; }
The above code is working fine but what actually I am trying to do is highlight by changing the color, so I tried the following code but its not working
#menu-menu li.current-menu-item a { color:#d9707a; }
#menu-menu li.current_page_item a { color:#d9707a; }
Could you please tell me how to solve this problem?
We don't know enough of your setup to know what the exact problem is. But it sounds to me that your color style might be being overwritten due to style specificity.
Either track down the style that is overwriting the color (using your browsers inspector) and change it there (but you need to confirm that it is safe to do so, as that style might be affecting other parts of your site) OR, the quick and dirty method of adding an !important tag to your styles.
Example:
#menu-menu li.current-menu-item a { color:#d9707a !important; }
#menu-menu li.current_page_item a { color:#d9707a !important; }
More info on style specificity:
What are the priorities among CSS selectors
Understanding CSS selectors
I have a custom cursor for an image map with a lot of hotspots. My cursor works fine in Firefox and Internet Explorer, but Safari returns the default one.
I used code found on other websites. My directory structure is:
index.php > css/main.css > css/images/pencil.cur
Here is my implementation (please note I need the same custom cursor for both normal and a, a:hover and a:visited states:
#gameScreen area, #gameScreen .wrapper, #gameScreen .wrapper a:hover, #gameScreen .wrapper a:visited {
cursor: url("images/rcspencil.cur"),url("css/images/rcspencil.cur"),default;
}
Any ideas?
Here's the most browser-compatible syntax I can think of. There might be a better one with browser hacks but I'd ignore it.
cursor: url(cursor.cur),url(cursor/cursor.cur),default;
I wouldn't think the quotations would prevent it from working, but try it without them. The only other thing I can think of is that your selectors are wrong, like the selectors you've got listed don't include the thing you're hovering over.