getting columns to change color on hover

Discussion in 'HTML' started by Rahul, Jul 23, 2009.

  1. Rahul

    Rahul Guest

    Is there a way to get a column to change emphasis color using css? I could
    successfully do this for rows but it does not seem to work for columns.

    table col:hover{
    background: #d0dafd;
    color: #339;
    }


    --
    Rahul
    Rahul, Jul 23, 2009
    #1
    1. Advertising

  2. Rahul wrote:
    > Is there a way to get a column to change emphasis color using css? I could
    > successfully do this for rows but it does not seem to work for columns.
    >
    > table col:hover{
    > background: #d0dafd;
    > color: #339;
    > }
    >
    >

    No, because TDs are not descendants of COL elements in DOM. What you
    wish requires JavaScript.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jul 23, 2009
    #2
    1. Advertising

  3. Rahul

    dorayme Guest

    In article <h48mng$6qk$-september.org>,
    "Jonathan N. Little" <> wrote:

    > Rahul wrote:
    > > Is there a way to get a column to change emphasis color using css? I could
    > > successfully do this for rows but it does not seem to work for columns.
    > >
    > > table col:hover{
    > > background: #d0dafd;
    > > color: #339;
    > > }
    > >
    > >

    > No, because TDs are not descendants of COL elements in DOM. What you
    > wish requires JavaScript.


    I think you are right.

    Mind you, OP can get a col to change colour by hovering on a table
    without js, but this is not quite what he wants.

    --
    dorayme
    dorayme, Jul 23, 2009
    #3
  4. Rahul

    Rahul Guest

    dorayme <> wrote in news:doraymeRidThis-
    :

    > Mind you, OP can get a col to change colour by hovering on a table
    > without js, but this is not quite what he wants.


    Actually, that was what I was thinking about. Maybe my spec wasn't clear or
    the finer distinctions of html are lost on me! :)

    Again,

    I can get a row to change color when I hover. Now if I could get a column
    to do that too it would be neat. Sort of the crosshair effect so that both
    the horizontal and vertical associations are clear.

    From what "dorayme" writes is that possible in html? Or is javascript my
    only option?

    --
    Rahul
    Rahul, Jul 23, 2009
    #4
  5. Rahul wrote:
    > dorayme <> wrote in news:doraymeRidThis-
    > :
    >
    >> Mind you, OP can get a col to change colour by hovering on a table
    >> without js, but this is not quite what he wants.

    >
    > Actually, that was what I was thinking about. Maybe my spec wasn't clear or
    > the finer distinctions of html are lost on me! :)
    >
    > Again,
    >
    > I can get a row to change color when I hover. Now if I could get a column
    > to do that too it would be neat. Sort of the crosshair effect so that both
    > the horizontal and vertical associations are clear.
    >
    > From what "dorayme" writes is that possible in html? Or is javascript my
    > only option?
    >


    No, as I said it would require JavaScript. COL is one of those oddball
    legacy "presentational" elements. It does not reveal itself in the DOM
    so CSS will not work on it. Use Web Developer's bar or some DOM
    inspector and your will see for yourself


    <html>
    <body>

    <table width="100%" border="1">
    <col align="left"></col>
    <col align="left"></col>
    <col align="right"></col>
    <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
    </tr>
    <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
    </tr>
    <tr>
    <td>2489604</td>
    <td>My first CSS</td>
    <td>$47</td>
    </tr>
    </table>

    </body>
    </html>


    COL will be a child of TABLE but *not* a child of TBODY where all the
    TDs are that you want to change background.

    TABLE > COL

    TABLE > TBODY > TR > TD

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jul 23, 2009
    #5
  6. Rahul

    dorayme Guest

    In article <h4alep$spf$-september.org>,
    "Jonathan N. Little" <> wrote:

    > Rahul wrote:
    > > dorayme <> wrote in news:doraymeRidThis-
    > > :
    > >
    > >> Mind you, OP can get a col to change colour by hovering on a table
    > >> without js, but this is not quite what he wants.

    > >
    > > Actually, that was what I was thinking about. Maybe my spec wasn't clear or
    > > the finer distinctions of html are lost on me! :)
    > >
    > > Again,
    > >
    > > I can get a row to change color when I hover. Now if I could get a column
    > > to do that too it would be neat. Sort of the crosshair effect so that both
    > > the horizontal and vertical associations are clear.
    > >
    > > From what "dorayme" writes is that possible in html? Or is javascript my
    > > only option?
    > >

    >
    > No, as I said it would require JavaScript.


    OP can get a col to change colour by hovering on a table
    without js, but this is not quite what he wants, he wants to be able to
    hover on the col itself.

    --
    dorayme
    dorayme, Jul 24, 2009
    #6
  7. Rahul

    Rahul Guest

    "Jonathan N. Little" <> wrote in news:h4alep$spf$1
    @news.eternal-september.org:

    > No, as I said it would require JavaScript. COL is one of those oddball
    > legacy "presentational" elements. It does not reveal itself in the DOM
    > so CSS will not work on it. Use Web Developer's bar or some DOM
    > inspector and your will see for yourself
    >


    Thanks Jonathan! THe "Developers Toolbar" is awesome! I had no idea this
    existed. It makes examining how stuff works so easy.

    Thanks again!

    --
    Rahul
    Rahul, Jul 24, 2009
    #7
  8. Rahul wrote:
    > "Jonathan N. Little" <> wrote in news:h4alep$spf$1
    > @news.eternal-september.org:
    >
    >> No, as I said it would require JavaScript. COL is one of those oddball
    >> legacy "presentational" elements. It does not reveal itself in the DOM
    >> so CSS will not work on it. Use Web Developer's bar or some DOM
    >> inspector and your will see for yourself
    >>

    >
    > Thanks Jonathan! THe "Developers Toolbar" is awesome! I had no idea this
    > existed. It makes examining how stuff works so easy.


    Great tool, not if Chris would just get it updated for Firefox 3.5.x

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jul 24, 2009
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. VB Programmer

    Change cell color when hover

    VB Programmer, Jun 11, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    3,798
    VB Programmer
    Jun 11, 2004
  2. Ken Williams

    Change href color on hover?

    Ken Williams, May 2, 2011, in forum: HTML
    Replies:
    3
    Views:
    16,870
    Helpful person
    May 3, 2011
  3. Kamaljeet Saini
    Replies:
    0
    Views:
    389
    Kamaljeet Saini
    Feb 13, 2009
  4. Gary
    Replies:
    13
    Views:
    562
  5. Krys

    Change link color on div hover

    Krys, Jun 7, 2009, in forum: Javascript
    Replies:
    20
    Views:
    479
    Thomas 'PointedEars' Lahn
    Jun 10, 2009
Loading...

Share This Page