...

View Full Version : Trying to flip-flop colors on CSS rollover



Bonmot
02-22-2008, 02:39 AM
Hello and thanks for taking a look. This has turned out to be quite a challenge.
The css is designed to switch images on rollover and I thought I could adapt
so that the up state would be white text on green background while the
hover state would reverse this to green text on white BG. The color switches
fine on rollover but nothing I've tried allows the text color to switch. It seems
as though it should be possible but I'm not finding it. Any ideas would be appreciated!

(Note: the sample page I have up has a temporary background with an image
of the menu. There are two sample menu elements for testing. Also, I have
the default text color set to black for now to verify that the text is really
there when the mouse-over switches the color block to white.)

http://sandbox.intermediawebdesign.com/BayState/home.html



Here's the CSS:

@charset "utf-8";
/* CSS Document */



#container {
height:1000px;
width:100%;
position:relative;
text-align:center;
}



.cssnav
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(ButtonUP.jpg) no-repeat;
left:263px;
top:160px;
white-space: nowrap;
display: block;
width: 250px;
height: 15px;
margin: 0;
padding: 0;
z-index:9;
}



.cssnav a
{
display: block;
color: #66ff00;
font-size: 12px;
width: 250px;
height: 15px;
display: block;
float: left;
text-decoration: none;
}

.cssnav img
{
width: 250px;
height: 15px;
border: 0
}

* html a:hover
{
visibility:visible;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#ffffff;
z-index:20;
}


.cssnav a:hover img
{
visibility:hidden
}

.cssnav span
{
position: absolute;
left: 30px;
top: 0px;
margin: 0px;
padding: 0px;
cursor: pointer;
height:15px;
width:250px;
text-align:left;
}


And HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bay State Laundry - Welcome!</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="IEstyle.css" />
<![endif]-->
<style type="text/css">
body { background: #00529B url(BG.jpg) center top no-repeat;}
</style>
</head>

<body>



<div class="cssnav">
<a href="http://www.URL.com" title="Services"><img src="ButtonHOVER.jpg" alt="Services"/><span>
Services</span></a></div>


<div class="cssnav">
<a href="http://www.URL.com" title="Athletic Clubs"><img src="ButtonHOVER.jpg" alt="Athletic Clubs"/><span>Athletic Clubs</span></a></div>

<div id="container"></div>

</body>
</html>

zfred09
02-22-2008, 02:57 AM
Instead of using

* html a:hover
{
visibility:visible;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#ffffff;
z-index:20;
}

Use


.cssnav a:hover
{
visibility:visible;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#fff;
z-index:20;
}

Bonmot
02-22-2008, 03:07 AM
That did it! Many thanks. Any idea what the point is of that

* html a:hover
{
visibility:visible;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#ffffff;
z-index:20;
}

First time I've come across an html reference in a css style sheet.
Just curious but mainly, thanks very much again, zfred.

jerry62704
02-22-2008, 02:16 PM
That did it! Many thanks. Any idea what the point is of that

* html a:hover
{
visibility:visible;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#ffffff;
z-index:20;
}

First time I've come across an html reference in a css style sheet.
Just curious but mainly, thanks very much again, zfred.

I think that is a IE5 hack (* html).

harbingerOTV
02-22-2008, 02:39 PM
its actually an IE lte 6 hack as 7 ignores it.

http://www.positioniseverything.net/articles/poll/star-html.php

Bonmot
02-22-2008, 03:54 PM
I think the whole IE development team are hacks.

Thanks everyone for the help.

effpeetee
02-22-2008, 05:08 PM
I think the whole IE development team are hacks.

Thanks everyone for the help.
If you look at the Sources program below, it has text size and colour change, It might help.

http://exitfegs.co.uk/Sources.html

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum