Tuesday, June 14, 2011

Highlight a SharePoint List row on mouse over using jQuery !

In this article we will see how to highlight list a row on mouse over using jQuery.

Lets get started

1. Create a Sharepoint list

2. Edit allitems.aspx page and add a content editor web part and copy the below jquery and mouser over style to that webpart.

 
<script type="text/javascript">
$(document).ready(function()
{
$('td.ms-vb2').hover(function() {
$(this).parent().addClass("highlight");
// On mouseout, remove classes
}, function() {
$(this).parent().removeClass("highlight");
});
 
}); </script>
<style>
.highlight {background-color:#9AFEFF}
</style>

1 comment:

  1. just use this;

    .ms-vb2:hover
    {
    color: #fff;
    background-color: #307cae;
    }

    ReplyDelete