亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用 jQuery 將鼠標懸停在兩個元素上

使用 jQuery 將鼠標懸停在兩個元素上

慕虎7371278 2023-04-27 10:45:27
我有兩個<div>相互連接的元素,我的意思是它們之間沒有空間。<div id="box1">1</div><div id="box2">2</div>我有這個 jQuery 代碼:$('#box1 , #box2').hover(function() {  console.log("Hovered")}, function() {  console.log("Not")});我的問題是當我在 box1 和 box2 之間移動鼠標時,我仍然在控制臺日志上看到“Not”。我希望將這些 div 視為一個元素,因此當我在它們之間移動鼠標時,我不會在控制臺日志中看到“Not”。提前致謝!
查看完整描述

3 回答

?
慕村225694

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>


查看完整回答
反對 回復 2023-04-27
?
尚方寶劍之說

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>


查看完整回答
反對 回復 2023-04-27
?
冉冉說

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")

 });


查看完整回答
反對 回復 2023-04-27
  • 3 回答
  • 0 關注
  • 159 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號