dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: CSS Rollover Problem

  1. #1
    Join Date
    Sep 2008
    Location
    Dallas
    Posts
    154

    CSS Rollover Problem

    I have a button that has an arrow on it that's suppose to glow on a rollover. The part in question is really in the CSS on the ".button:hover .rightSide" section. So far this works in Chrome, Opera, Safari, but not FF. Would FF for some reason not support this?



    HERE'S THE HTML............................

    <html>
    <head>
    <link type="text/css" href="ss.css" rel="stylesheet" />
    </head>
    <body>

    <div id="container">

    <div class="button">
    <div class="leftSide">&nbsp;</div><span>Special Sales</span><div class="rightSide">&nbsp;</div>
    </div>

    </div>
    </body>
    </html>

    HERE'S THE CSS.............................
    #container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 130px;
    height: 25px;
    }

    .button {
    background: url("middle.png");
    background-repeat: repeat-x;
    height: 25px;
    }

    .button:hover .rightSide {
    background: url("rightSideGlow.jpg");
    background-repeat: no-repeat;
    width: 26px;
    height: 25px;
    display: inline;
    position: absolute;
    right: 0px;
    }

    .button span {
    position: absolute;
    top: 2px;
    left: 9px;
    }

    .leftSide {
    position: absolute;
    background: url("leftSide.jpg");
    background-repeat: no-repeat;
    width: 23px;
    height: 25px;
    display: inline;
    }

    .rightSide {
    background: url("rightSide.jpg");
    background-repeat: no-repeat;
    width: 26px;
    height: 25px;
    display: inline;
    position: absolute;
    right: 0px;
    }

  2. #2
    Join Date
    Feb 2010
    Posts
    21
    The hover property only works on a elements (links) in older browsers. Use this:

    Demo: http://search-this.com/css_buttons2.html
    Code: http://search-this.com/website-desig...lover-buttons/

  3. #3
    Join Date
    Jan 2010
    Location
    Cambridge, UK
    Posts
    42
    I suggest using csshover.

  4. #4
    Join Date
    Sep 2008
    Location
    Dallas
    Posts
    154
    Thanks for the reply guys. Interesting note, my HTML/CSS works fine. I just didn't have a doctype in there. Once I put in the doctype, everything worked! I think w/o the doctype, the browser interprets my code as being built for an older browser; one that doesn't support hover.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles