Solved

Hover CSS Color Change Not Working

Posted on 2011-09-15
5
221 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 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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

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
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

687 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