同时从两个潜水器悬停

Hover out from two divs simultaneously

本文关键字：两个 潜水 悬停      更新时间：2023-09-26

看看下面的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你可能会看到上面的代码在第一个目标照片的左边矩形中发生了什么(上下之间的过渡会引起颜色的变化，这是不可取的)。谢谢你

试试这个

<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');  
});
<

小提琴演示/strong>

使用@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/

相关文章：