• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 267
  • Last Modified:

Hover CSS Color Change Not Working

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
digitalwise
Asked:
digitalwise
1 Solution
 
LZ1Commented:
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
 
digitalwiseAuthor Commented:
FF6 and IE8.   Hmmm...
0
 
Jen0910Commented:
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
 
Kyle HamiltonData ScientistCommented:
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
 
user_nCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now