SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    :hover on a h3 and p together?

    Code:
    <div id="content">
    <h3><a href="#samelink">Heading</a></h3>
    <p><a href="#samelink">Little bit of text under and about the heading</a></p>
    </div>
    is it possible to make all the text in the above div change colour on hover, rather than just the p or just the h3 somehow? if so how?

    thanks.

  2. #2
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #content:hover { background-color: red; }

    This works fine in most browsers, but not IE as IE only supports hover on anchors (unless .js is used).

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I understand correctly you want to change the text color:

    When you hover the DIV the background will change to green and text in child elements will turn red

    #content:hover * {
    color: red;
    }

    #content:hover {
    background: green;
    }

  4. #4
    SitePoint Guru
    Join Date
    Aug 2003
    Location
    CT
    Posts
    643
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by johnyboy
    Code:
    <div id="content">
    <h3><a href="#samelink">Heading</a></h3>
    <p><a href="#samelink">Little bit of text under and about the heading</a></p>
    </div>
    is it possible to make all the text in the above div change colour on hover, rather than just the p or just the h3 somehow? if so how?

    thanks.
    the only way to do it cross browser is to make it messy...

    <h3>test <br /><span style="font-size: .6em;">ing</span></h3>

    it validates xhtml trans, but i wouldn't recommend it.
    My Blog: SkeyMedia.com

  5. #5
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    well this from hannson
    Code:
     #content:hover * {
     color: red;
     }
    does exactly what i was after -- the * is what i was missing. which browsers doesn't that work in? ie by any chance? i know ie doesn't listen to hover on anything but anchors. the above doesn't work in ie right? do they get no hover at all? is there way to get what the above code gets most people but also allow ie users to at least see a hover on just the particular piece of text they're rolling over, the p or the h3?

    thanks

  6. #6
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    briansol, yes i thought of something like that but as you say it isn't cool.

    i wonder if there is a way to get at least a basic normal hover for the browsers which the #content:hover * doesn't work for and that allows the #content:hover * thing to work with the browsers it does work for?

    thanks

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You could do something like this which is prefectly valid and semantic.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    #content h3 a{
     display:block;
     background:#ffffcc;
     color:#000;
     text-decoration:none;
    }
    #content h3 a strong{
     display:block;
     font-size:75%;
     margin-top:15px;
     color:red;
    }
    #content h3 a:hover{background:yellow;color:red}
    #content h3 a:hover strong{color:blue}
    </style>
    </head>
    <body>
    <div id="content">
     <h3><a href="#">Heading<strong>Little bit of text under and about the heading</strong></a></h3>
    </div>
    </body>
    </html>
    It may not be what you want but hey you can't have everything

  8. #8
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    weird, i copied and pasted briansol's name and it's copied and pasted the link that the name linked to as well -- that's pretty impressive. didn't know that happened. although i've now realised the link is completely incorrect so it's not impressive at all, just a bit weird.

    Paul, yup that's not bad -- thanks. i guess it works ok in ie? yes it must do because it's a straight single anchor and it'll do a hover on that i'm pretty sure.

    thanks.

  9. #9
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    i removed the display:block; from the #content h3 a { one and it still worked fine in safari -- is it ok to remove that or not? (the other one in #content h3 a strong { does stop it working correctly though) thanks.

  10. #10
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    oh also, the #content:hover * method -- does that not work at all in ie? that is no hover colour change at all?

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    removed the display:block; from the #content h3 a {
    If you remove the display:block then the anchor will not expand to fill the h3 and the background colour will only cover the anchor text (and the mouse hotspot area will only be the text also and not the whole block).

    But that may be what you want

  12. #12
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    If you remove the display:block then the anchor will not expand to fill the h3 and the background colour will only cover the anchor text (and the mouse hotspot area will only be the text also and not the whole block).

    But that may be what you want
    oh right, yes i see. didn't notice that change. thanks very much.


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
  •