#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    14
    Rep Power
    0

    Unhappy Properly format hover effect table specific


    i have the following css:
    Code:
    .table1 {
    	border-collapse: collapse;
    	width: 50%;
    	margin: 24px;
    	font-size: 1.1em;
    }
    
    .table1 th {
    	background: #3e83c9;
    	color: #fff;
    	font-weight: bold;
    	padding: 2px 11px;
    	text-align: left;
    	border-right: 1px solid #fff;
    	line-height: 1.2;
    }
    
    .table1 td {
    	padding: 6px 11px;
    	border-bottom: 1px solid #95bce2;
    	vertical-align: top;
    }
    
    .table1 td * {
    	padding: 6px 11px;
    }
    
    .table1 tr.alt td {
    	background: #ecf6fc;
    }
    
    .table1 tr.over td, tr:hover td {
    	background: #bcd4ec;
    }
    However all tr and td's now getting a hover effect.
    i tried several methods but I'm to unpracticed with css.

    Grtzz whitehat
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2009
    Posts
    61
    Rep Power
    21
    I'm not 100% sure what your question is here, but here are my thoughts.

    You wrote:
    .table1 tr.over td, tr:hover td {
    background: #bcd4ec;
    }

    First I took out the "tr.over td" since it essentially does nothing as far as this is concerned.

    Now the code should be:
    .table1 tr:hover td {
    background: #bcd4ec;
    }

    This code's behavior will be to highlight a table row whenever you put the mouse over it. The td does nothing since you put the hover event on tr.

    Since you put the td there, I assume you wanted the td to get the background color whenever you highlight it. To do that the code needs to say
    .table1 td:hover{
    background: #bcd4ec;
    }

    This will put a background color on any td within the table1 class when you hover over it.

    I hope this helped.
  4. #3
  5. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Hi,

    Brandon is correct. That will do what he said, and he had a nice explanation too One problem is that IE6 does not support the :hover psuedo class on any element besides anchor tags (<a>'s). Try reading some of these articles on possible fixes:

    http://www.danvega.org/blog/index.cf...hover-selector
    http://www.xs4all.nl/~peterned/csshover.html

    Cheers
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    14
    Rep Power
    0
    Thank you both for the help and explenation
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    14
    Rep Power
    0
    Thank you both for your informations and help

    Grtzzz wHiTeHaT
  10. #6
  11. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    No problem, next time, only one reply is needed lol. If you have anymore questions, feel free to ask If you want to learn CSS try going to various CSS sites such as alistpart.com or something similar, and just read some articles

    Cheers
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR

IMN logo majestic logo threadwatch logo seochat tools logo