?
Solved

Hover CSS Color Change Not Working

Posted on 2011-09-15
5
Medium Priority
?
239 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 2000 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month14 days, 15 hours left to enroll

839 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