Set element style to the :hover style using jQuery

Question

Is it possible (using jQuery or otherwise) to set the style of a certain element to the :hover style defined in a stylesheet?

.regStyle {
   background-color: #000;
}

.regStyle:hover {
   background-color: #fff;
} 

Trying it out

$("#differentButton").click(function(){
    // this doesn't work 
    $("#someElement").addClass("regStyle:hover").remove("regStyle");
});

Answer 1

No. It'd be better to just give that state another class itself in the CSS and then use your method to add that class.

.regStyle:hover,
.regStyle.hover {
    css: properties;
    go: here;
}

$("#differentButton").click(function(){
    // this doesn't work 
    $("#someElement").addClass("hover");
});

EDIT: Okay, I take it back. There might be a way with .trigger('mouseover') . To explain:

$('.regStyle').mouseover( function() {
    $(this).css('css','property');
});

$('.otherElement').click( function() {
    $('.regStyle').trigger('mouseover');
});

Completely untested and a little more cumbersome, but it may work.

Answer 2

Look at http://api.jquery.com/hover/

.hover( handlerInOut )

    $( "li" ).hover(
      function() {
        $( this ).toggleClass('active');
      }
    );


.hover( handlerIn, handlerOut )

    $("li").hover(
      function() {
        $(this).addClass('active');
      }, function() {
        $(this).removeClass('active');
      }
    );