Strange Hover Behavior

[ToddWW]

I have table elements with a "td1" class definition. My CSS is written as follows

.td1:hover {
     border:red solid 1px;
}

However, if I change the border style using JavaScript like this.

elmtRef.style.border = "blue solid 1px;"

Everything works great, but the hover no longer fires on that previously clicked cell.

Basically what I'm trying to do is highlight a table cell border to red when hovering. When a click occurs, I use javascript to change the border to blue. When a click occurs on another cell, I use javascript to revert the last clicked cell to it's default border color. All of that works great. But when I hover over the (already once clicked) cell again, hover doesn't work anymore.

Any ideas?

 

[ToddWW]

Solved. Instead of changing the border style directly with Javascript, I setup another class and use Javascript to switch between the two classes. Hover works good now.

 

[ToddWW]

Here's the code.

function getDetail(elmtRef,parms) {
   if (typeof lastClickedElmt == "object") {
      lastClickedElmt.className = "td1";
   }
   elmtRef.className = "td2";			
   lastClickedElmt = elmtRef;
}

CSS

.td1 {
   border:rgb(160,160,160) solid 1px;
   background-color:white;
}
		
.td1:hover {
   border:blue solid 1px;
   cursor:pointer;
   background-color:rgb(230,230,230);
}

.td2 {
   border:blue solid 1px;
   background-color:rgb(230,230,230);
   }
		
.td2:hover {
   cursor:pointer;
}