SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using :hover without a text link

    I feel a bit of a spanner asking this question as I feel like I should know the answer. However I've not found the answer after searching the forum:

    Is it possible to use :hover on anything other than a text link?

    I see examples of using :hover all over but they're always like this: td a:hover{...}

    Although this will change the appearance of the table cell, it relies on hovering over a text link contained within it rather than simply the td itself.

    How do I change the following css so that hovering over the span will change the span's background?

    .myspan{
    background: url("red_flower.gif" );
    }
    .myspan:hover{
    background: url("blue_flower.gif" );
    }

    <span class="myspan">Text over a changing background</span>


    Thanks,

    Andy
    From the English nation to a US location.

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Basically you have to use the anchor to get the :hover pseudo to work if you plan a CSS only approach with the 'background-image' though of course the anchor doesn't have to point anywhere.

  3. #3
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're right, that should have been 'background-image' and in my page that's what I have. I typed the code into my message wrongly.

    However, that isn't what's causing my problem


    Thanks,

    Andy
    From the English nation to a US location.

  4. #4
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Depends whether you want it to work in IE or not. The following trivial example works perfectly in recent versions of both Mozilla and Opera, but not IE, which only supports :hover on anchors.
    Code:
    <html><head><title>Hover</title><style>
    h1 { color: blue; }
    h1:hover { color: red; }
    </style></head><body>
    <h1>MouseOver Me!</h1>
    </body></html>

  5. #5
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, that explains it then.
    It's only for something which will be used on IE and so I was only testing it on that. Looks like I'll just have to use Javascript. I was trying to do it properly by simply using CSS, but again I have to come to the conclusion that CSS still isn't up to the demands of serious web development.

    Thanks for the help,

    Andy
    From the English nation to a US location.

  6. #6
    Super Ninja Monkey Travis's Avatar
    Join Date
    Dec 2001
    Location
    Sioux City, Iowa
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS is up to it, its support by IE isn't.
    Travis Watkins - Hyperactive Coder
    My Blog: Realist Anew
    Projects: Alacarte - Gnome Menu Editor

  7. #7
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by travis
    CSS is up to it, its support by IE isn't.
    Well it amounts to the same thing because it can't be relied on in all browsers.

    Enough with the badgers already!

    Andy
    From the English nation to a US location.

  8. #8
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by awestmoreland
    Well it amounts to the same thing because it can't be relied on in all browsers.
    Not really. Actually, you have ONE COMPANY holding up the future of development in CSS. That is not the same as a flawed standard. WAP is a flawed standard; IE is a flawed browser. I understand your frustration, but it's not CSS's fault.

  9. #9
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fair enough. Point taken.
    I've still to see a site written using only CSS that impresses me however. I'm sure that the code looks great, but generally you can spot a CSS-only page a mile off because it looks "a bit naff"

    Andy
    From the English nation to a US location.


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
  •