How can I add an attribute to each row of a table only when hovering (not hovering a row) via jQuery?
What's the best way to add an attribute (like -webkit-filter: blur (2px), for example) to each line only when the user hovers over the line and doesn't set it on the hovered line? This way, basically every line will be blurred except for the one the user hovers over and the effect will disappear when the user mouse does not vibrate on any line (all lines will become easy to read without any effect).
source to share
Sets all name blur or class rule based on selection, if setting class names is not relevant (for example #myTable tbody tr
) remove class name on hover. To make the table show only focus blur, use :hover
in the css definition.
$(function(){
$("#myTable tr").addClass("unfocused");
$('.unfocused').hover(function(){
$(this).removeClass('unfocused');
},function(){
$(this).addClass('unfocused');
});
});
#myTable:hover .unfocused{
filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<tr>
<td>Hello</td><td>World</td>
</tr>
<tr>
<td>Hello</td><td>World</td>
</tr>
<tr>
<td>Hello</td><td>World</td>
</tr>
<tr>
<td>Hello</td><td>World</td>
</tr>
<tr>
<td>Hello</td><td>World</td>
</tr>
<tr>
<td>Hello</td><td>World</td>
</tr>
</table>
source to share
The simplest way I can think of is http://jsfiddle.net/n3a1d4z8/
$('.tg tr').hover( function(){
$('.tg tr').toggleClass('blur');
$(this).toggleClass('blur');
});
The CSS filter property only works in Chrome 31+, Safari 7+, Opera 18+. No Firefox or Explorer. So check the example in one of the supported browsers to see the blur effect :)
source to share