Right now, I've implemented legal notices at the bottom of my page and I've managed to make all the links white. However, I want only the hover colour to be different, like this website: http://www.condolicious.com/
Can someone please tell me how to do this? I tried changing the a:hover color thing and I'm only getting solid colours. Thanks.
#footer .notice a {
a:link; color: #fff;
a:visited; color: #fff;
a:hover; color: #fff;
a:active; color: #fff;
text-decoration: none;
}
Your :hover styles need to be separate CSS declarations - not part of the #footer .notice a {} block, like so:
#footer .notice a {
color: #fff;
text-decoration: none;
}
#footer .notice a:hover,
#footer .notice a:active {
color:#CC0000;/*Whatever color you like */
}
You need to do this
#footer .notice a {
color: #fff;
text-decoration: none;
}
#footer .notice a:hover {
color: #fff; // change to a different color
}
Same with :visited and :active.
Did you realize all your links have the same color? Even the hover state?
#footer .notice a:hover { color: red; }
you'll need to adjust your syntax
#footer .notice a:hover {
color:green;
text-decoration: none;
}
The syntax above isn't going to work:
#footer .notice a {
color: #000;
text-decoration: none;
}
#footer .notice a:hover {
color: #FFF;
}
The first CSS declaration will set the colour of all your a tags (you don't need to set them individually unless they're styled differently). The second sets the colour on hover, a pseudoclass that is supported by all modern browsers (and most older ones).
You don't need to set the text-decoration again in the second declaration, as the :hover already inherits all the "generic" attributes set in the first declaration.
You've got to declare each link hover state separately, like this:
/* you can combine css declarations as follows */
#footer .notice a {
color: #fff;
text-decoration: none;
}
#footer .notice a:visited {
color: #fff; /* change this to whatever color you'd like */
}
#footer .notice a:hover {
color: #000; /* change this to whatever color you'd like */
text-decoration: underline;
}
#footer .notice a:active {
color: #fff; /* change this to whatever color you'd like */
}
Change your code to:
#footer .notice a {
color: #fff;
text-decoration: none;
}
#footer .notice a:hover {
color:#AAA
}
here, #AAA is color when anchor tag is hovered.
edit: removed the invalid css
Related
My CSS code for .header and .mtstyle are now showing in my header when I preview. Nothing I have done has fixed the issue. This just started to happen. Thoughts? Also, is there a way to combine the a:link css into one line? Thanks.
.header {
position: absolute;
height: 45px;
right: 0;
top: 0;
left: 0;
background-color: white;
}
.mtstyle {
text-align: center;
margin-top: 5px;
margin-left:15px;
}
/* unvisited link */
.mtlstyle a:link {
color: #3399CC;
}
/* visited link */
.mtlstyle a:visited {
color: #3399CC;
}
/* mouse over link */
.mtlstyle a:hover {
color: none;
}
/* selected link */
.mtlstyle a:active {
color: #3399CC;
}
.mtlstyle a:link {
text-decoration: none;
}
.mtlstyle a:visited {
text-decoration: none;
}
.mtlstyle a:hover {
text-decoration: none;
}
.mtlstyle a:active {
text-decoration: none;
}
<div class="header">
<div class="mtstyle">
<div class="mtlstyle">
<h1>Title</h1>
</div>
</div>
</div>
When you want to code, always try to close your open tags before put another tag in it!
For starter your HTML is incorrect in this line:
<h1>Title</h1>
It should be:
<h1>Title</h1>
you must enclose a tag first then close the h1.
And you can always create CSS for multiple classes or behaviour with use of ",", like this:
a:hover, a:visited, a:active {
text-decoration: none;
}
Delete this
/* unvisited link */
.mtlstyle a:link {
color: #3399CC;
}
/* visited link */
.mtlstyle a:visited {
color: #3399CC;
}
I have this for my default css which is exactly what I want for the majority of my webpage (RED and then it underlines on hover)
a:link, a:visited{
color: #F00;
text-decoration: none;
}
a:hover, a:visited:hover{
color: #F00;
text-decoration: underline;
}
However in some cases I want it to be White and but then still turn red on hover, and I was hoping to override the white on the occasions I need to as it is far less common than the other style.
I tried
a href="/" style="color:#FFF">Home
This overrides the colour for both parts which makes sense for why it is doing it, but I want it to only overwrite the static link and not the on hover.
Any help would be appreciated!
Thanks
You can use a class, take a look at this
article {
background: #ccc;
padding: 20px;
}
a:link, a:visited{
color: #F00;
text-decoration: none;
}
a:hover, a:visited:hover{
color: #F00;
text-decoration: underline;
}
a.white:link, a.white:visited{
color: #FFF;
text-decoration: none;
}
a.white:hover, a.white:visited:hover{
color: #F00;
text-decoration: underline;
}
<article>
<p>
normal
</p>
<p>
alternate
</p>
</article>
Use a class with the color white defined, then apply this class to each anchor that should be white. In CSS...
a.white:link, a.white:visited {
color:#ffffff;
}
In HTML...
...
Just use a class for this.
body {
background: gray;
}
a.whiteLink {
color: white;
}
a {
color: #F00;
text-decoration: none;
}
a:hover {
color: #F00;
text-decoration: underline;
}
Home
I'm sure this is a rather simple fix but I haven't been able to figure it out.
I used the page properties in Dreamweaver to come up with the CSS for the links on the page and everything was working correctly. I now have one row where I need to change both the link and hover colors for a few links.
<head>
<style type="text/css">
<!--
body {
background-color: #666666;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #666666;
}
a:active {
text-decoration: none;
color: #000000;
-->
</style>
</head>
I was able to change the link color successfully by using the code below in the body.
Website
What I have not been able to do successfully is change the rollover. I've searched and tried a few different methods to solve the problem but haven't had any success. Could somebody point out what I'm doing wrong or give me an example of how the CSS should look?
Give your special links a special class:
CSS
.link
{
color: rgb(20, 80, 153);
}
.link:hover{..}
.link:active{..}
.link:visited{..}
HTML
Website
So to colour the link you just need:
a{
color: rgb(20,80,153);
text-decoration: none;
}
Then if its hover you want:
a:hover {
color: red;
}
HTML:
Website
CSS:
a{
color: rgb(20,80,153);
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
color: red;
}
DEMO HERE
On top of that, if you do not want it for ALL links you give them a class:
HTML:
Website
CSS:
.test {
color: rgb(20,80,153);
}
.test:hover {
color: red;
}
DEMO HERE
use class names instead of just targeting the a
CSS
a.someName1:link {
color: #000000;
text-decoration: none;
}
a.someName1:visited {
text-decoration: none;
color: #000000;
}
a.someName1:hover {
text-decoration: none;
color: #666666;
}
a.someName1:active {
text-decoration: none;
color: #000000;
}
HTML
Website
The easiest way to change the colors for a entire row would be to add a class to said row (or <tr>, I'm assuming) and then add CSS for all links that are descendants of a element with that class.
I'm making some assumptions on your HTML, but it will probably go something like this...
HTML:
<tr class="atl-color">
<td>Link #1</td>
<td>Link #2</td>
</tr>
CSS:
.alt-color a:link { color: blue; }
.alt-color a:hover { color: red; }
I am creating a website and I am unsure of why the links on the page are not showing up as the right colors when hovered over. Here is one of the pages: http://jsfiddle.net/yentup/CR9TK/
The links I am worried about are the links in the content of the page. When hovered over, they are supposed to be red. However, they stay the same color. I am able to force the correct color using !important, but I would much rather avoid this because then all the other links I also have to use !important on to get their correct colors as well. Here is the bit of css that is conflicting, but you can find all the css for the entire page in the link mentioned above:
a:link {
text-decoration: none;
color: #787878;
}
a:hover {
color: #8B2323;
text-decoration: underline;
}
#header ul li a {
text-decoration: none;
text-transform: uppercase;
font-family: 'Quintessential', serif;
font-size: 24px;
font-weight: bold;
color: #909090;
border-left: 1px dotted #d0d0d0;
padding: 8px 14px;
}
#header ul li a:hover {
color: #D2691E;
}
Swap places of a:hover and a:visited .
a:visited {
color: #787878;
}
a:hover {
color: #8B2323;
text-decoration: underline;
}
Should work then as expected.
This is one of the links in my nav:
<li><span id="navLiveNow" class="white innerShadow textShadow">Live Now</span></li>
I also have the following in my css:
a { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:focus { text-decoration: none; }
a:hover, a:active { text-decoration: none; }
But the links still display in the awful blue/purple visited /hover html default. What am i doing wrong?
You need to override the color:
a { color:red } /* Globally */
/* Each state */
a:visited { text-decoration: none; color:red; }
a:hover { text-decoration: none; color:blue; }
a:focus { text-decoration: none; color:yellow; }
a:hover, a:active { text-decoration: none; color:black }
REMOVE DEFAULT LINK SOLVED
that :visited thing is css.... you just go to your HTML and add a simple
< a href="" style="text-decoration: none" > < /a>
... thats the way html pages used to be
<a href="https://www." style="color: inherit;"target="_blank">
For CSS inline style, this worked best for me.
Hey define color #000 into as like you and modify your css as like this
.navBtn { text-decoration: none; color:#000; }
.navBtn:visited { text-decoration: none; color:#000; }
.navBtn:hover { text-decoration: none; color:#000; }
.navBtn:focus { text-decoration: none; color:#000; }
.navBtn:hover, .navBtn:active { text-decoration: none; color:#000; }
or this
li a { text-decoration: none; color:#000; }
li a:visited { text-decoration: none; color:#000; }
li a:hover { text-decoration: none; color:#000; }
li a:focus { text-decoration: none; color:#000; }
li a:hover, .navBtn:active { text-decoration: none; color:#000; }
If you wants display anchors in your own choice of colors than you should define the color in anchor tag property in CSS like this:-
a { text-decoration: none; color:red; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:focus { text-decoration: none; }
a:hover, a:active { text-decoration: none; }
see the demo:- http://jsfiddle.net/zSWbD/7/
By default link color is blue and the visited color is purple. Also, the text-decoration is underlined and the color is blue.
If you want to keep the same color for visited, hover and focus then follow below code-
For example color is: #000
a:visited, a:hover, a:focus {
text-decoration: none;
color: #000;
}
If you want to use a different color for hover, visited and focus. For example Hover color: red visited color: green and focus color: yellow then follow below code
a:hover {
color: red;
}
a:visited {
color: green;
}
a:focus {
color: yellow;
}
NB: good practice is to use color code.
When you set the style of a tag in your CSS it goes global (as Andreas Wong mentioned), IE, it is applied in every scenario to that tag (visited, hovered, focus etc...), unless you manually change it
So you can do it like bellow:
a{
color : blue;
}
Now you can specify the color in a certain scenario:
a{
color : blue;
}
a: focus{
color : skyblue;
{