[英]Trigger a hover effect while hovering on another div
目前,我正在學習如何用javascript和jquery編寫代碼。我編寫了一個簡單的jquery代碼,當您將鼠標懸停在一個div時,第二個div也將被懸停。 但是,我編寫的代碼無法正常工作。 我的知識不足以糾正我自己犯的錯誤,這就是為什么如果有人可以幫助我,我將非常感激。
PS:我知道只能用CSS做到這一點,但我對此並不感興趣。
我的代碼:
$('.Box1').mouseover(function(e) { $('.Box2').trigger(e.type); })
body{ margin:0; padding:0; background-color:green; } .Box1{ position:relative; width:100vw; height:10vh; transition: background-color 1s ease; } .Box1:hover{ background-color:#FFF; } .Box2{ position:absolute; top:10vh; width:100vw; height:20vw; background-color:red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="Box1"></div> <div class="Box2"></div>
您只需要“偽造”懸停事件即可。 接受將附加到.Box2:hover css的任何代碼,並將其分配給一個類。 當您將鼠標懸停在.Box1上時,將該類添加到.Box2中,當您將鼠標懸停在該框上時,請刪除該類。 該代碼如下所示:
.Box2{
position:absolute;
top:10vh;
width:100vw;
height:20vw;
background-color:red;
transition: background-color 1s ease;
}
.Box2:hover, .Box2.hovered {
background-color: #FFF;
}
$(function () {
$('.Box1').mouseover(function(e) {
$('.Box2').addClass("hovered");
});
$(".Box1").mouseout(function () {
$(".Box2").removeClass("hovered");
});
// or optionally using .hover() for in/out handling as per A. Wolff's comment
$(".Box1").hover(function () {
$(".Box2").addClass("hovered");
}, function () {
$(".Box2").removeClass("hovered");
});
});
您的代碼確實觸發了Box2的mouseover事件-您可以通過添加處理程序進行測試:
$('.Box2').mouseover(function() {console.log('hello')})
但是,這不會激活Box2的css:hover屬性(如果已定義)。 您可能需要為Box2的mouseover事件編寫一個處理程序,以處理css屬性。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.