Question

I am doing a webapp and I have a table which is generated by wicket ListView.
What the app does is that when the mouse hovers over a cell, the app will populate an info panel via ajax and what I want is to change cell border so that the user can know which cell the information is related to.
currently I have the following code in css. (scroll-content-item is the class of the table)

scroll-content-item td:hover{
border-style:outset;
border-width:5px;
border-color:#0000ff;} 

This does give the border on hover but as soon as the user move the mouse outside the cell the border is gone. What I want is a way to make the border stay as long as the mouse doesn’t move to another cell. Is there any way to make the border stay until the mouse is moved onto another cell? I appreciate any suggestions.

Answer 1

Can’t do it with CSS. You can use JS though. Here’s an example using jQuery.

$("td").hover(function() {
    $("td").removeClass('highlight');
    $(this).addClass('highlight');
});​

DEMO