Solved

Hover CSS Color Change Not Working

Posted on 2011-09-15
5
202 Views
Last Modified: 2012-05-12
I am just trying to change the color on a link hover.   For some reason it isn't working for me this time...   The border below works just fine but the color doesn't change.
<A HREF="boarding.htm" class="mini">Boarding</A>

a.mini  {
color: #334755;
text-decoration:none;	
}

a.mini:hover {
color: #B50025;
text-decoration:none;
border-bottom-style:solid;
border-bottom-width:thin;
border-bottom-color: #B50025;
}

Open in new window

0
Comment
Question by:digitalwise
5 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 36543201
It changed for me in FF 6 and IE 8. In IE 7 the border doesn't show up. What browser are you looking at?
0
 

Author Comment

by:digitalwise
ID: 36543393
FF6 and IE8.   Hmmm...
0
 
LVL 8

Expert Comment

by:Jen0910
ID: 36545259
Instead of giving the link a class of MINI, can you give the DIV (or the P, or wherever your link lives, or even an SPAN) a class of MINI and then try this:

.mini a  {
color: #334755;
text-decoration:none;	
}

.mini a:hover {
color: #B50025;
text-decoration:none;
border-bottom-style:solid;
border-bottom-width:thin;
border-bottom-color: #B50025;
}

Open in new window


:hover sometimes causes annoying little bus here and there if it isnt directly ties to an "a:"

Hope that helps.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36546612
Not all versions of IE support :hover

You can always add this little js you your head to get IE to support a bunch of HTML5 and CSS3 stuff - very handy.

 
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
    		<![endif]-->

Open in new window

0
 
LVL 9

Accepted Solution

by:
user_n earned 500 total points
ID: 36549387
This works fine for me

<html>
<style type="text/css">
a.mini  {
color: #334755;
text-decoration:none;	
}

a.mini:hover {
color: #B50025;
text-decoration:none;
border-bottom-style:solid;
border-bottom-width:thin;
border-bottom-color: #B50025;
}
</style>
<body>
<A HREF="boarding.htm" class="mini">Boarding</A>
</body>
</html>

Open in new window

0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

789 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question