Row color change on mouseover

Discussion in 'CSS' started by greatlogix, Feb 2, 2012.

0
  1. #1
    I am using following code to change row background color on mouse over and on click 

      <script type="text/javascript">
var whosChanged = null;
function changeMe(el)
    { 
     el.style.backgroundColor = "#D0DCEB";
     el.style.color = "#000000";
     if (whosChanged != null)
         {
          whosChanged.style.backgroundColor = ""
          whosChanged.style.color = ""
         }
    whosChanged = el; 
    }
</script>
<style type="text/css">
.tableborder{
	border-bottom:1px solid #CCC; 
	padding:1px;
	/*background-color: #BBB; */
	
	
}
tr.tableborder:hover{background-color: #E3EBF2} 
</style>
</head>

<body>
<table border="0" >
  <tr onClick="changeMe(this);" class="tableborder">
    <td class="tableborder">Apple</td>
    <td class="tableborder">Banana</td>
  </tr>
  <tr onClick="changeMe(this);" class="tableborder">
    <td class="tableborder">Cat</td>
    <td class="tableborder">Dog</td>
  </tr>
  <tr onClick="changeMe(this);" class="tableborder">
    <td class="tableborder">Toyota</td>
    <td class="tableborder">Honda</td>
  </tr>
</table>
    HTML:
    Code works fine. I get into problem when i try to add background color to row
    /*background-color: #BBB; */
    after removing comment rollover row background color change doesn't work. What is the problem here? What i need to fix it?
     
    greatlogix, Feb 2, 2012 IP
  2. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #2
    Why javascript lol?? Isn't it easier to use CSS only?
     
    wiicker95, Feb 2, 2012 IP
  3. greatlogix

    greatlogix Active Member

    Messages:
    664
    Likes Received:
    13
    Best Answers:
    1
    Trophy Points:
    85
    #3
    Pardon... How?
     
    greatlogix, Feb 2, 2012 IP
  4. phxadam

    phxadam Well-Known Member

    Messages:
    229
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    128
    #4
    I dont think this is possible with only CSS.

    Try something like: onclick="document.getElementById('tr').style.color='#BBB'"
     
    phxadam, Feb 3, 2012 IP
  5. spesialis

    spesialis Member

    Messages:
    25
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #5
    HOVER OVER BUTTON CODE

    glowing image at the top

    <a class="button1" href="http://www.google.com">Your button</a>

    .button1 {
    display: block;
    width: ????px;
    height: ???px;
    background: url('your image code') bottom;
    text-indent: -99999px;
    }
    .button1:hover {
    background-position: 0 0;
    }
     
    spesialis, Feb 4, 2012 IP