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.
Related
I am trying to create site footer for my wordpress site. in HTML I have the following:
<div class="footer-titles">Footer title one</div><br />
<div class="lefttext1">Community <br />
Forums <br />
Contact Us <br />
</div>
In my CSS I have the following:
.lefttext1 {
text-align: left;
font-size: 13px;
color: #ffffff; !important;
line-height: 1.8;
font-weight: 400;
margin-left: none;
padding: none;
list-style-type: none;
}
.footer-titles {
color: #ffffff;
font-size: 18px;
text-align: left;
line-height: 1.9;
font-weight: 600;
}
The background is #333 and I want the font color to be #ffffff but I can't do that. In every time I use inspect element I see this:
#Bottom a {color:#888;}
#Bottom a:hover {color:#111;}
If this was only relevant to the home page, I would use:
.home #Bottom a:hover {color: #ffffff;}
.home #Bottom a:link {color: #ffffff;}
and that's it. But this is not the case because I want the links to be white site wide. I already tried the following code and it didn't work:
.lefttext1 a {
text-align: left;
font-size: 13px;
color: #ffffff; !important;
line-height: 1.8;
font-weight: 400;
}
Please help me make the URL font color white on site wide footer as I need to override the [#Bottom a] on all pages for this specific pseudo selector but I am not sure how to achieve this.
Thanks
Try this code
.lefttext1 a:link, .lefttext1 a:visited, .lefttext1 a:active, .lefttext1 a:hover {
color: #FFFFFF;
}
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
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 have these styles for all my a links globally. I am not able to override the a link style in a div on the same page.
a, a:visited{
outline: 0;
cursor: pointer;
color: inherit;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
Now I want to override the style for anchor link to change its color to white on hover but only in a div of multiple classes unseen and notification container like this one...
<div class="unseen notificationContainer">
<a href="profile?customerId=1365764036258">
<strong>robert</strong>
</a>
sent you a friend request
<a href="friend_request?type=accept¬ificationId=1365764054463">
Accept
</a>
<a href="friend_request?type=reject¬ificationId=1365764054463">
Reject
</a>
</div>
so I add the following to my CSS
.unseen{
background: #09f;
color: #fff;
}
.unseen a :hover{
color: #fff;
text-decoration: underline;
}
When the page loads hovering on first link makes changes its color to white but the other three take the color blue of the background. I have been on this for the past one hour and not it's just irritating. Style for notificationContainer is as below
.notificationContainer{
width: 390px;
float: left;
border-bottom: solid 1px #eee;
padding: 5px;
}
Thanks in advance.
CSS cannot possibly have bugs, only a browser can (unless you mean errors in the CSS specification, etc).
That said, this is a bug in your code and not with the browser:
.unseen a :hover{
color: #fff;
text-decoration: underline;
}
The space between a and :hover means any element that is :hover and within a, much like .unseen a means a elements within .unseen, so that won't work. You need to remove that space:
.unseen a:hover{
color: #fff;
text-decoration: underline;
}
Not really sure what you're after - your question doesn't really make it clear. Forgive me if I've miss-guessed. Does this help? (You can target elements with multiple classes)
<style>
a, a:visited{
outline: 0;
cursor: pointer;
color: inherit;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
.unseen.notificationContainer a:hover
{
background: #09f;
color: #fff;
text-decoration: underline;
}
.notificationContainer
{
display: inline-block;
float: left;
border-bottom: solid 1px #eee;
padding: 5px;
}
</style>
and
<div class="unseen notificationContainer">
<strong>robert</strong>
sent you a friend request
Accept
Reject
</div>
I have a hyperlink in my website that I want to be part #A0A0A0 and part #880000 for a:link and a:visited, and I want it to change to part #FFFFFF and part #AA0000 for a:hover and a:active. But I want it to be all one link. I have tried two solutions so far, but neither worked out the way I want.
The first was:
a.menu:link { color: #a0a0a0; text-decoration: none; }
a.menu:visited { color: #a0a0a0; text-decoration: none; }
a.menu:hover { color: #ffffff; text-decoration: none; }
a.menu:active { color: #ffffff; text-decoration: none; }
<a class="menu" href="/about.html">Dubious
<span style="color: #880000;">Array</span>
.net</a>
In this solution, the color of the middle part ('Array') stays as #880000 the whole time and doesn't change to #AA0000 for :hover or :active.
The second solution was to create a <a> </a> for each part of the string (so one for 'Dubious', one for 'Array' and one for '.net') and have the css for the middle <a> </a> be
a.redMenu:link { color: #880000; text-decoration: none; }
a.redMenu:visited { color: #880000; text-decoration: none; }
a.redMenu:hover { color: #AA0000; text-decoration: none; }
a.redMenu:active { color: #AA0000; text-decoration: none; }
The colors worked fine this way; but the string was three separate links, so mousing over one link wouldn't change the color in the others.
So what I want to be able to do is to change the css in the middle of a hyperlink from a.menu to a.redMenu then back again to a.menu, but I can't work out how. Can anyone here solve my problem?
Thanks, Jacob
You can use your original HTML, just remove the inline style:
<a class="menu" href="/about.html">
Dubious<span>Array</span>.net
</a>
Then simply add these css declarations for span:
a.menu:link span, a.menu:visited span{color: #880000;}
a.menu:hover span, a.menu:active span {color: #aa0000;}
a.redMenu:hover span { color: #AA0000; text-decoration: none; }
This tells the span what color to be when it's parent link is hovered.
<html>
<head>
<style type="text/css">
p { background: #00c }
a.menu:link { color: #a0a0a0; text-decoration: none; }
a.menu:visited { color: #a0a0a0; text-decoration: none; }
a.menu:active { color: #ffffff; text-decoration: none; }
a.menu:hover span.normal { color: #800 }
a.menu:hover span.hilite { color: #880 }
</style>
</head>
<body>
<p><a class="menu" href="/about.html"><span class="normal">Dubious
<span class="hilite">Array</span> .net</span></a>
</p>
</body>
</html>