我需要TOGGLE：特定div的悬停操作，但当鼠标光标位于其他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>
Fiddle：http://jsfiddle.net/u4a1z3d2/3/
请解释为什么这个jQuery操作不起作用？
不能使用jQuery强制元素状态，因为它不是受信任的事件。您必须创建一个悬停类，并在元素上使用toggleClass
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/
有关受信任事件的说明，请参阅此页。
$('.ms-thumb-desc').hover(function () {
$('.ms-thumb-hover').css("font-size", "1.5em");
$('.ms-thumb-hover').css("color", "red");
}, function () {
$('.ms-thumb-hover').css("color", "black");
});
演示：https://jsfiddle.net/u4a1z3d2/1/
您也可以在完全没有JS的情况下，通过瞄准父对象，然后在子对象上擦除：
.ms-thumb:hover .ms-product-thumb {
color: red;
}
.ms-thumb .ms-product-thumb:hover {
color: black;
}
http://jsfiddle.net/u4a1z3d2/5/
试试这个http://jsfiddle.net/u4a1z3d2/4/
$('.ms-thumb-desc').hover(function(){
$('.ms-thumb-hover').css("background", "red");
}, function() {
$('.ms-thumb-hover').css("background", "none");
});
别忘了在jsfiddle中添加库。