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，我不希望应用上面代码的最后两行。我希望它们仅在鼠标从两个 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

Answer 2

使用@nnnnn提到的技术，例如，使用超时：

(function init() {
    var $up = $('#up'),
        $down = $('#down'),
        hovered = false;

    $up.hover(over, out);
    $down.hover(over, out);

    function over() {
        hovered = true;

        $up.css({
            "background-color": "#020306"
        });
        $down.css({
            "background-color": "#171716"
        });
    }

    function out() {
        setTimeout(function to() {
            if (!hovered) {
                $up.css("background-color", "#C8CACF");
                $down.css("background-color", "#FAFAF8");
            }

        }, 1000);

        hovered = false;
    }
})();

http://jsfiddle.net/TudqT/3/

并且元素内联彼此相邻，而不是垂直对齐：

http://jsfiddle.net/TudqT/5/

同时从两个div中悬停出来

2 个答案: