Running a hover or mouse to get a specific CSS effect

Question

I tried to call the hover event in the previous row of the table so that I can get the effect defined in CSS, but it does not work. Basically what I have are two rows that need this border effect for overlays whenever every row is washed out. What is the solution in jQuery for this?

JQuery

$("tr").hover(function() { $(this).prev().trigger('mouseover'); }); 

CSS

 tr:hover .row-right { border-right: 10px solid #CCC; } 

Answer 1

JQuery

  $("tr").mouseover(function() { $(this).prev().addClass('hover'); }); $("tr").mouseout(function() { $(this).prev().removeClass('hover'); }); 

CSS

  tr.hover .row-right { border-right: 10px solid #CCC; } 

jsFiddle link to this: http://jsfiddle.net/vsApc/