如何觸發多個懸停動作/事件？

我在這裏有5個盒子，當我從一端懸停到另一端盒子改變顏色時，轉換延遲是6秒，因此動畫很慢。如何觸發多個懸停動作/事件？

我怎樣才能觸發多個懸停事件，

是當我將鼠標移動到一個div，它應該觸發其懸停事件。

示例：當我從左向右移動鼠標時，應該運行所有div的懸停事件。

在我的代碼的第一個懸停效果被觸發，那麼等待事件結束，然後開始上一些其他分區這僅僅是個指針下的下一個懸停效果。

.box{ 
 
    display: inline-block; 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: #000; 
 
    color: #fff; 
 
    -webkit-transition: .6s 0s; 
 
    text-align:center; 
 
} 
 

 
#box-1:hover{background-color: #C8F608;} 
 
#box-2:hover{background-color: #23DC07;} 
 
#box-3:hover{background-color: #07D7D7;} 
 
#box-4:hover{background-color: #076BD7;} 
 
#box-5:hover{background-color: #1307D7;}

<div class="container"> 
 
    <div class="box" id="box-1">bx1</div> 
 
    <div class="box" id="box-2">bx2</div> 
 
    <div class="box" id="box-3">bx3</div> 
 
    <div class="box" id="box-4">bx4</div> 
 
    <div class="box" id="box-5">bx5</div> 
 
</div>

這裏是我的jsfiddle

感謝您的幫助:)

來源

2014-07-20 x0x

在:hover指示的background-color當你離開的元素不再適用。因此元素將回到未隱藏的狀態。完全依賴:hover時，您無法防止發生這種情況。

相反，您可以在懸停上添加一個類，以便保持效果。

演示：http://jsfiddle.net/LYT8J/3/

CSS

#box-1:hover, #box-1.hovered {background-color: #C8F608;} 
#box-2:hover, #box-2.hovered {background-color: #23DC07;} 
#box-3:hover, #box-3.hovered {background-color: #07D7D7;} 
#box-4:hover, #box-4.hovered {background-color: #076BD7;} 
#box-5:hover, #box-5.hovered {background-color: #1307D7;}

的JavaScript

$('.box').mouseover(function() { 
    $(this).addClass('hovered'); 
}); 
$('.container').mouseleave(function() { 
    $(this).find('.hovered').removeClass('hovered'); 
});

來源

2014-07-20 20:02:41 techfoobar

你希望所有的div標籤觸發懸停效果徘徊時OVE一，對嗎？

如果是這種情況，您可以使用jQuery來解決這個問題。

$(document).ready(function() { 
    $("div[id^='box-']").mouseenter(function() { 
    $("#box-1").css("background-color", "#C8F608"); 
    $("#box-2").css("background-color", "#23DC07"); 
    $("#box-3").css("background-color", "#07D7D7"); 
    $("#box-4").css("background-color", "#076BD7"); 
    $("#box-5").css("background-color", "#1307D7"); 
    }); 

    $("div[id^='box-']").mouseleave(function() { 
    $("#box-1").css("background-color", "#EEEEEE"); 
    $("#box-2").css("background-color", "#EEEEEE"); 
    $("#box-3").css("background-color", "#EEEEEE"); 
    $("#box-4").css("background-color", "#EEEEEE"); 
    $("#box-5").css("background-color", "#EEEEEE"); 
    }); 
});

這應該做你想做的。當你進入任何div標籤與id與box-開始就會觸發這個事件mouseenter改變各div的background-color獨立。 mouseleave事件會將背景顏色恢復爲原來的background-color。你沒有列出原來的顏色，所以我只是說#EEEEEE淺灰色。

來源

2014-07-20 20:08:28 Khaltazar

如何觸發多個懸停動作/事件？

回答

相關問題