jquery enable :hover of div on other div mouseover

Question

I need TOGGLE :hover action of specific div, but also when mouse cursor is over other DIV

  <div class="ms-thumb">
    <div class="ms-product-thumb">
        <div class="ms-thumb-hover">
            .ms-thumb-hover
        </div>
    </div>
    <div class="ms-thumb-desc">
        on this mouseover: make '.ms-thumb-hover' red!
    </div>
  </div>

jQuery

<script>
$('.ms-thumb-desc').hover(function(){
    $('.ms-thumb-hover').hover();
});
</script>

Here is Fiddle : http://jsfiddle.net/u4a1z3d2/3/

Explain please why this jQuery action don't work?

Answer 1

You cannot force an element state using jQuery since it's not a trusted event. You'll have to create a hover class and use toggleClass on the element

jQuery:

$('.ms-thumb-desc').hover(function(){
    $('.ms-thumb-hover').toggleClass('hover');
});

CSS:

.ms-thumb-hover:hover, .ms-thumb-hover.hover {
    background-color: red;
}

http://jsfiddle.net/u4a1z3d2/6/

See this page for an explanation on trusted events.