-1

目前，我正在學習如何使用javascript和jquery編寫。我寫了一個簡單的jquery代碼，其中當您懸停一個div時，第二個div也會懸停。但是，我寫的代碼不起作用。我的知識不足以解決我自己犯的錯誤，所以如果有人能幫助我，我會非常感激。 PS：我知道它只能用CSS來完成，但我對此並不感興趣。在另一個div上懸停時觸發懸停效果

我的代碼：

$('.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>

來源

2016-05-25 George Stoqnov

您無法通過JavaScript觸發CSS'：hover'選擇器。 –

關於你的發佈代碼，你期望做什麼觸發'.Box2'鼠標懸停事件？沒有事件也不'：懸停'CSS集，所以？！ –

你只需要「假」懸停事件。採取任何您將附加到.Box2的代碼：懸停CSS並將其分配給一個類。當您將鼠標懸停在.Box1上時，將該類添加到.Box2，當您將鼠標懸停時，請移除該類。該代碼將如下所示：

Working Demo

CSS

.Box2{ 
    position:absolute; 
    top:10vh; 
    width:100vw; 
    height:20vw; 
    background-color:red; 
    transition: background-color 1s ease; 
} 

.Box2:hover, .Box2.hovered { 
    background-color: #FFF; 
}

jQuery的

$(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"); 
    }); 
});

來源

2016-05-25 16:37:42 mhodges

作爲一個方面說明，你可以使用'hover（）'輸入/輸出處理程序：http://jsfiddle.net/xwv6a4ub/ –

您的代碼不會觸發BOX2鼠標懸停事件 - 你可以測試這個添加處理程序：

$('.Box2').mouseover(function() {console.log('hello')})

但是，這不會激活Box2的css：hover屬性（如果已定義）。你可能需要爲Box2的mouseover事件編寫一個處理器來處理css屬性。

來源

2016-05-25 16:49:08

在另一個div上懸停時觸發懸停效果

回答

CSS

jQuery的

相關問題