3 回答

TA貢獻1880條經驗 獲得超4個贊
我希望這些 div 被視為一個元素
好吧,很簡單,他們不是。他們不可能。這不是 HTML 和 CSS 的工作方式。
為綁定到事件處理程序的每個單獨元素觸發懸停事件。每次您離開其中一個元素時,它都會按照您的說明打印“not”輸出。
沒有按照您描述的確切方式對此進行“修復”,但是有其他方法。一個明顯的解決方案是將它們都包裝在一個外部 div 中,并將懸停事件綁定到它。那么整個區域將被視為一個元素(因為它確實是)。演示:
$('#boxcontainer').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
#boxcontainer {
border: solid 1px black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boxcontainer">
<div id="box1">1</div>
<div id="box2">2</div>
</div>

TA貢獻1788條經驗 獲得超4個贊
朋友檢查下面的代碼。我想這對你有用。因為你有 dai 你有一個絕對位置 div 你必須需要一個父 div 并且父 div 位置必須是相對的。為此,您只需添加一個簡單的 CSS 代碼position: relative;。您還需要對 jquery 代碼進行一些更改。您只需將鼠標懸停在父 div 上,它就會完成您的工作。希望這段代碼能幫到你。
//Box 1 Demo
$('#boxParrent1').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
//Box 2 Demo
$('#boxParrent2').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
/*Main Code that are needed*/
#boxParrent1, #boxParrent2 {
position: relative;
}
/*Codes Just used to give you a demo*/
#boxParrent1, #boxParrent2{
display: flex;
margin-bottom: 50px;
border: 1px solid #000;
}
#boxParrent1{
width: 200px;
}
#boxParrent2{
width: 210px;
}
#box1, #box2, #box3, #box4{
background: tomato;
width: 100px;
height: 100px;
display: grid;
justify-content: center;
align-items: center;
font-family: Arial;
font-size: 50px;
color: #fff;
cursor: pointer;
}
#box2, #box4{
position:absolute;
top: 0;
left:100px;
background: #02dce6;
}
#box4{
left:110px;
background: #02dce6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boxParrent1">
<div id="box1">1</div>
<div id="box2">2</div>
</div>
<div id="boxParrent2">
<div id="box3">3</div>
<div id="box4">4</div>
</div>

TA貢獻1877條經驗 獲得超1個贊
嘗試將您的 2 放在div一個 super 中div
<div id="super">
<div id="box1">1</div>
<div id="box2">2</div>
</div>
$('#super').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
添加回答
舉報