Triggering a hover or mouseover to get a defined CSS effect

Question

I've tried to trigger a hover event on a previous row in a table so I could get it's effect defined in CSS but it's not working. Basically what I have is 2 rows joined that need this border effect for mouseovers whenever either row moused over. What is a solution in jQuery for this?

jQuery

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

CSS

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

Triggering the mouseover event using JavaScript has no relation to the CSS hover property. See Yaron Uilel's answer for an alternative solution. — mgibsonbr
– mgibsonbr, Commented Jan 21, 2012 at 14:21

Yaron U. · Accepted Answer · 2012-01-21 14:15:40Z

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 for this: http://jsfiddle.net/vsApc/

answered Jan 21, 2012 at 14:15

Yaron U.

7,9333 gold badges33 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

umpirsky Over a year ago

Can this be achieved by triggering some events on $(this).prev()? To avoid using hover class and use :hover instead.

Collectives™ on Stack Overflow

Triggering a hover or mouseover to get a defined CSS effect

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related