javascript - 同时从两个 div 悬停

Question

看看下面的 JQuery 代码:

function my_hover()
{ 
$( "#up,#down" ).hover(
   function() {
       $("#up").animate({
    "background-color": "#020306"
         });               
    $("#down").animate({
        "background-color": "#171716"
    });           
      },
function() {
       $("#up").css("background-color","#C8CACF" );       
   $("#down").css("background-color","#FAFAF8" );
      }
   );
}

有两个 div:#up、#down，我无法将其包装到父 div 中(由于设计限制)。我想要做的是在悬停#up 或#down 时为背景颜色的变化设置动画。但是，如果鼠标直接移动到另一个而离开一个 div(两个 div 垂直粘在一起)，我不希望应用上述代码的最后两行。我希望只有当鼠标从两个 div 悬停时才应用它们。我怎样才能做到这一点？在 users.sch.gr/ellhn 上，您可能会在带有目标照片的第一个左侧矩形中看到上述代码发生了什么(向上和向下之间的过渡会引起颜色变化，这是不可取的)。谢谢

Answer 1

试试这个。

HTML

<div id="up">Up</div>
<div id="down">down</div>

CSS

div{ transition:all 0.25s ease-in-out;}
#up{background:#C8CACF;}
#down{background:#FAFAF8;}
#up.up-hover{background-color:green;}
#down.down-hover{background-color:yellow;}

脚本

$('#up, #down').mouseenter(function(){
    //alert('hi')
    $("#up").addClass('up-hover');               
    $("#down").addClass('down-hover');  
})
.mouseleave(function(){
    //alert('hi')
    $("#up").removeClass('up-hover');               
    $("#down").removeClass('down-hover');  
});

Fiddle Demo