CODEWITHSUNDEEP
htmlcsswicket
LT_Chen
LT_Chen

Reputation: 113

table cell border change on hover

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.

Upvotes: 0

Views: 3476

Answers (3)

pnuts
pnuts

Reputation: 276

table {
    border-collapse: collapse;
}
td {
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: none;
    border-bottom: none;
}

tr td:last-child {
    border-right: 1px solid black;
}

tr:last-child td {
    border-bottom: 1px solid black;
}

td:hover {
    border: 1px solid red !important;
}

Upvotes: 0

LT_Chen
LT_Chen

Reputation: 113

This is my final solution:

<!DOCTYPE HTML>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <style>
  .highlight{
    border-style:outset;
    border-width:3px;
    border-color:#0000ff;
  }
  </style>
  <script type="text/javascript">
  $(document).ready(function(){
    $("td").hover(function(){
      $("td").removeClass('highlight');
      $(this).addClass('highlight');
    });
  });
  </script>
</head>
<body>
  <table class="waypointsTable" border="1">
    <tbody>
      <tr>
        <td>some text</td>
        <td>some text</td>
        <td>some text</td>
        <td>some text</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Upvotes: 0

sachleen
sachleen

Reputation: 31131

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

Upvotes: 7

Related Questions