CODEWITHSUNDEEP
htmlcsscolorshover
Appyze Apps
Appyze Apps

Reputation: 98

Color not changing during :hover

The color doesn't change when I hover. I don't get what is wrong! I tried changing the hover code to underline and it worked. It just does not work for color. I also don't think it is the main css of the page because link color changes work fine in other links.

CSS:

.cssmenu{
    border:0px;
    padding:0px;
    font-size:16px;
    font-weight:bold;
    position:absolute;
    top: 7px;
    width:100%;
}
.cssmenu ul{
    position:relative;
    left: 50%;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
    text-align: right;
}
.cssmenu li{
    float:left;
    padding:0px;
    }
.cssmenu li a{
    font-weight:normal;
    line-height:35px;
    text-decoration:none;
    margin:0px;
    padding:0px 25px;
    text-align:center;
    font-size: 18px;
    transition:color 0.5s;
    -moz-transition:color 0.5s; /* Firefox 4 */
    -webkit-transition:color 0.5s; /* Safari and Chrome */
    -o-transition:color 0.5s; /* Opera */
    }
.cssmenu li a:hover {
    color:#39F;
    }

HTML:

<div class="cssmenu">
<ul>
   <li><a href='index.html'><span>Home</span></a></li>
   <li><a href='about.html'><span>About</span></a></li>
   <li><a href='products.html'><span>Products</span></a></li>
   <li><a href='contact.html'><span>Contact Us</span></a></li>
</ul>
</div>

Upvotes: 0

Views: 3112

Answers (4)

Appyze Apps
Appyze Apps

Reputation: 98

Thanks for everyone's help. I realised that it was because that I changed all the text in the webpage to white. I don't know why that prevented the links from changing color, but at least my problem is solved.

Upvotes: 0

Manish Sharma
Manish Sharma

Reputation: 1720

.cssmenu li a{}

in this class there is no color property is defined so may be just because of some other classes color of a and a:hover is similar. so if u want to use color transition choose two different color for a and a:hover

Upvotes: 0

Greg Rozmarynowycz
Greg Rozmarynowycz

Reputation: 2085

As mentioned in comments, color is too close to original.

If you want that particular color, you could make the font bold, or increase the size of the font. You could also add a background.

http://jsfiddle.net/thundercracker/4Q8qu/5/

EDIT: One more thing, the change in color is even less noticeable than usual because of the fade transition. The human is designed to catch contrast and fast change. If you want it to be noticeable, you want to increase the contrast. Either speed of the animation, make the color difference greater, or add another effect like an underline or background that appears when someone hovers.

Upvotes: 2

Alex Reynolds
Alex Reynolds

Reputation: 6352

Agree with Greg. Works in Safari, FF, and chrome. Code looks fine. Issue may be with color choice. Also open FF and use Firebug to check if hover is getting applied that way you know it works. Since this is a snippet of code you may have another css rule conflicting.

Upvotes: 3

Related Questions