?
Solved

Hover CSS Color Change Not Working

Posted on 2011-09-15
5
Medium Priority
?
225 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

New benefit for Premium Members - Upgrade now!

Ready to get started with anonymous questions today? It's easy! Learn more.

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses four methods for overlaying images in a container on a web page
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 …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses
Course of the Month10 days, 2 hours left to enroll

762 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