Search code examples
javascriptjqueryhtmlcssrow

hover on a td and add a class to span

Question: I want to hover my mouse on a row and again in that particular row, if I hover my mouse on icons(pencil, trash), then the corresponding icons should get rounded borders as shown in first snapshot..

Can you please help me how can I achieve this ? I want everthing to be controlled using JS/jquery actions. Appreciate your help

Explanation: so far what i did and my code..

1) Below is my td element, Now on mouseover the css class icon-hover(below code pasted) should get appended to the span class below

<td class='j-td-edit font-color-meta'><span class="glyphicon glyphicon-pencil"></span></td>

enter image description here

CSS snippet responsible to get the rounded border is below

/*icon hover style*/
.icon-hover {
    border: 1px solid #bfbfbf;
    padding: 0.4vw;
    border-radius: 0.3vw;
}

2) When I hover my mouse on a row, the row gets highlighted with below code and screenshot attached..

/*row hover*/
.hover-color{
    background-color: #D0CFCF;
}

=> corresponding JS action for "mouseenter, mouseleave" and image are below 

$(document).on('mouseenter', '.row', function () {
    var $this = $(this), row = $this.closest("tr");
    row.addClass("hover-color");
});

$(document).on('mouseleave', '.row', function () {
    var $this = $(this), row = $this.closest("tr");
    row.removeClass("hover-color");
});

enter image description here

Solution

  • Using CSS :hover pseudo-class 

    .row {
  height: 35px;
  background: #f5f5f5;
}
.row:hover {
  background: #dddddd;
}

.row .glyphicon {
  padding: 5px;
}
.row .glyphicon:hover {
  outline: 1px solid #000000;
}
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

<table width="100%">
  <tr class="row">
    <td>Test</td>
    <td class='j-td-edit font-color-meta'><span class="glyphicon glyphicon-pencil"></span></td>
  </tr>
  <tr class="row">
    <td>Test</td>
    <td class='j-td-edit font-color-meta'><span class="glyphicon glyphicon-pencil"></span></td>
  </tr>
  <tr class="row">
    <td>Test</td>
    <td class='j-td-edit font-color-meta'><span class="glyphicon glyphicon-pencil"></span></td>
  </tr>
</table>