SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast Bad_Panda's Avatar
    Join Date
    Jun 2005
    Location
    Swinton, Manchester.
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Complex CSS :hover Rollover

    Hi,
    I have a horizontal menu of four blue tabs. On rollover I want the rolled over tab to stay blue, whilst the others turn grey. I have no problem doing the opposite using CSS, i.e. using a double-height image for each tab, then shifting it vertically on rollover.

    I just wondered if there was an easy way to use CSS for my menu, or will I have to resort to Javascript?

    Thanks.

  2. #2
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can I ask why you would want to do this? Doesn't sound like a very good user experience...
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  3. #3
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't think of anyway you could do this purely with CSS - you'd have to use JS to change the class/id value for the other elements.
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches

  4. #4
    SitePoint Enthusiast Bad_Panda's Avatar
    Join Date
    Jun 2005
    Location
    Swinton, Manchester.
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's purely a client request. At least if it can't be done with CSS it gives me another reason to shoot the idea down. I agree it's not a very usable solution.
    Thank you both for your replies.

  5. #5
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't see how it would be done without JavaScript. Somehow Stu Nicholls would be able to though!
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  6. #6
    SitePoint Enthusiast ydesignsx™'s Avatar
    Join Date
    Dec 2007
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I'm unsure if this is what you are trying, but see the attachment. I tested it in FF3 and IE7 and it works. I doesn't work for browsers like IE6, that do not support the :hover pseudo selector. For IE6 and under, you can try using the whatever:hover and conditional statements.

    testlist.zip


Bookmarks

Posting Permissions

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