Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Trying to flip-flop colors on CSS rollover

    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.c...tate/home.html



    Here's the CSS:
    Code:
    @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:
    Code:
    <!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>

  • #2
    New Coder zfred09's Avatar
    Join Date
    Dec 2006
    Posts
    69
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Instead of using
    Code:
    * html a:hover
    {
    visibility:visible;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#ffffff;
    z-index:20;
    }
    Use
    Code:
    .cssnav a:hover
    {
    visibility:visible;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#fff;
    z-index:20;
    }

  • #3
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That did it! Many thanks. Any idea what the point is of that
    Code:
    * 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.

  • #4
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Quote Originally Posted by Bonmot View Post
    That did it! Many thanks. Any idea what the point is of that
    Code:
    * 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).
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #5
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    its actually an IE lte 6 hack as 7 ignores it.

    http://www.positioniseverything.net/.../star-html.php
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #6
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think the whole IE development team are hacks.

    Thanks everyone for the help.

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by Bonmot View Post
    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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •