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

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

如何在將鼠標懸停在特定圖形項目上時顯示/隱藏 div？

如何在將鼠標懸停在特定圖形項目上時顯示/隱藏 div？

慕運維8079593 2024-01-22 20:04:33
當我將鼠標懸停在特定的圖形項目上時，我試圖顯示或隱藏 div。具體來說：我試圖實現的目標如下：當我將鼠標懸停在按鈕 #1 上時，我想顯示帶有按鈕 1 文本的 div；當我將鼠標懸停在按鈕 #2 上時，我想顯示帶有按鈕 2 文本的 div；等等...首先，我嘗試重現一個簡單的示例（該示例正在運行）：<!DOCTYPE html><html><head><style>.hide {  display: none;}    .myDIV:hover + .hide {  display: block;  color: red;}</style></head><body><div class="myDIV">Hover over me.</div><div class="hide">I am shown when someone hovers over the div above.</div></body></html>然而，我無法完成這項工作。有誰知道如何將此示例應用到下面的 HTML 結構中？僅供參考：此腳本中的類用作虛擬類來描述我嘗試實現的目標。<div>  <div>    <section>      <figure>        <i class="hover pin 1">1</i>        <i class="hover pin 2">2</i>        <i class="hover pin 3">3</i>        <i class="hover pin 4">4</i>      </figure>    </section>  </div>              <div class="hide when not equal to hover item 1">    <h3>Text item 1</h3>  </div>  <div class="hide when not equal to hover item 2">    <h3>Text item 2</h3>  </div>  <div class="hide when not equal to hover item 3">    <h3>Text item 3</h3>  </div>  <div class="hide when not equal to hover item 4">    <h3>Text item 4</h3>  </div></div>
查看完整描述

3 回答

?
慕容708150

TA貢獻1831條經驗 獲得超4個贊

雖然我想您可以純粹CSS出于此目的而使用，但付諸JS實踐以達到預期結果要容易得多。

<!DOCTYPE html>

<html>


<head>

? ? <title></title>

? ? <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


? ? <link >

? ? <link rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

? ? <link rel="stylesheet" type="text/css" href="style.css">

? ? <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

? ? <style>

? ? ? ? .PinDiv{

? ? ? ? ? ? display: none;

? ? ? ? }

? ? </style>

</head>

<body>

? ? <div>

? ? ? ? <div>

? ? ? ? ? ? <section>

? ? ? ? ? ? ? ? <figure>

? ? ? ? ? ? ? ? ? ? <i class="HoverPin" onmouseover="document.getElementById('PinDiv1').style.display='block';" onmouseout="document.getElementById('PinDiv1').style.display='none';">1</i>

? ? ? ? ? ? ? ? ? ? <i class="HoverPin" onmouseover="document.getElementById('PinDiv2').style.display='block';" onmouseout="document.getElementById('PinDiv2').style.display='none';">2</i>

? ? ? ? ? ? ? ? ? ? <i class="HoverPin" onmouseover="document.getElementById('PinDiv3').style.display='block';" onmouseout="document.getElementById('PinDiv3').style.display='none';">3</i>

? ? ? ? ? ? ? ? ? ? <i class="HoverPin" onmouseover="document.getElementById('PinDiv4').style.display='block';" onmouseout="document.getElementById('PinDiv4').style.display='none';">4</i>

? ? ? ? ? ? ? ? </figure>

? ? ? ? ? ? </section>

? ? ? ? </div>? ? ? ? ? ??

? ? ? ? <div id="PinDiv1" class="PinDiv">

? ? ? ? ? ? <h3>Text item 1</h3>

? ? ? ? </div>

? ? ? ? <div id="PinDiv2" class="PinDiv">

? ? ? ? ? ? <h3>Text item 2</h3>

? ? ? ? </div>

? ? ? ? <div id="PinDiv3" class="PinDiv">

? ? ? ? ? ? <h3>Text item 3</h3>

? ? ? ? </div>

? ? ? ? <div id="PinDiv4" class="PinDiv">

? ? ? ? ? ? <h3>Text item 4</h3>

? ? ? ? </div>

? ? </div>

</body>

</html>


使用JQuery我們可以稍微清理一下：


<!DOCTYPE html>

<html>


<head>

? ? <title></title>

? ? <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


? ? <link >

? ? <link rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

? ? <link rel="stylesheet" type="text/css" href="style.css">

? ? <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

? ? <style>

? ? ? ? .PinDiv{

? ? ? ? ? ? display: none;

? ? ? ? }

? ? </style>

</head>

<body>

? ? <div>

? ? ? ? <div>

? ? ? ? ? ? <section>

? ? ? ? ? ? ? ? <figure>

? ? ? ? ? ? ? ? ? ? <i class="HoverPin" onmouseover="$('#PinDiv1').css('display','block');" onmouseout="$('#PinDiv1').css('display','none');">1</i>

? ? ? ? ? ? ? ? ? ? <i class="HoverPin" onmouseover="$('#PinDiv2').css('display','block');" onmouseout="$('#PinDiv2').css('display','none');">2</i>

? ? ? ? ? ? ? ? ? ? <i class="HoverPin" onmouseover="$('#PinDiv3').css('display','block');" onmouseout="$('#PinDiv3').css('display','none');">3</i>

? ? ? ? ? ? ? ? ? ? <i class="HoverPin" onmouseover="$('#PinDiv4').css('display','block');" onmouseout="$('#PinDiv4').css('display','none');">4</i>

? ? ? ? ? ? ? ? </figure>

? ? ? ? ? ? </section>

? ? ? ? </div>? ? ? ? ? ??

? ? ? ? <div id="PinDiv1" class="PinDiv">

? ? ? ? ? ? <h3>Text item 1</h3>

? ? ? ? </div>

? ? ? ? <div id="PinDiv2" class="PinDiv">

? ? ? ? ? ? <h3>Text item 2</h3>

? ? ? ? </div>

? ? ? ? <div id="PinDiv3" class="PinDiv">

? ? ? ? ? ? <h3>Text item 3</h3>

? ? ? ? </div>

? ? ? ? <div id="PinDiv4" class="PinDiv">

? ? ? ? ? ? <h3>Text item 4</h3>

? ? ? ? </div>

? ? </div>

</body>

</html>

如果你想讓它們保持開放，你可以這樣做：


<!DOCTYPE html>

<html>


<head>

? ? <title></title>

? ? <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


? ? <link >

? ? <link rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

? ? <link rel="stylesheet" type="text/css" href="style.css">

? ? <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

? ? <style>

? ? ? ? .PinDiv{

? ? ? ? ? ? display: none;

? ? ? ? }

? ? </style>

</head>

<body>

? ? <div>

? ? ? ? <div>

? ? ? ? ? ? <section>

? ? ? ? ? ? ? ? <figure>

? ? ? ? ? ? ? ? ? ? <i class="HoverPin" onmouseover="$('#PinDiv1').css('display','block');" onmouseout="$('.PinDiv:not(#PinDiv1)').css('display','none');">1</i>

? ? ? ? ? ? ? ? ? ? <i class="HoverPin" onmouseover="$('#PinDiv2').css('display','block');" onmouseout="$('.PinDiv:not(#PinDiv2)').css('display','none');">2</i>

? ? ? ? ? ? ? ? ? ? <i class="HoverPin" onmouseover="$('#PinDiv3').css('display','block');" onmouseout="$('.PinDiv:not(#PinDiv3)').css('display','none');">3</i>

? ? ? ? ? ? ? ? ? ? <i class="HoverPin" onmouseover="$('#PinDiv4').css('display','block');" onmouseout="$('.PinDiv:not(#PinDiv4)').css('display','none');">4</i>

? ? ? ? ? ? ? ? </figure>

? ? ? ? ? ? </section>

? ? ? ? </div>? ? ? ? ? ??

? ? ? ? <div id="PinDiv1" class="PinDiv">

? ? ? ? ? ? <h3>Text item 1</h3>

? ? ? ? </div>

? ? ? ? <div id="PinDiv2" class="PinDiv">

? ? ? ? ? ? <h3>Text item 2</h3>

? ? ? ? </div>

? ? ? ? <div id="PinDiv3" class="PinDiv">

? ? ? ? ? ? <h3>Text item 3</h3>

? ? ? ? </div>

? ? ? ? <div id="PinDiv4" class="PinDiv">

? ? ? ? ? ? <h3>Text item 4</h3>

? ? ? ? </div>

? ? </div>

</body>

</html>


查看完整回答
反對 回復 2024-01-22
?
慕妹3146593

TA貢獻1820條經驗 獲得超9個贊

你可以嘗試這個快速的 css 技巧來實現你所需要的:)


CSS：


.hoverable:not(:hover) + .show-on-hover {

    display: none;

}

HTML：


<div style="display: flex">

  <i class="hover pin 1">1

    <div class="hide">

      <h3>Text item 1</h3>

    </div>

  </i>

  <i class="hover pin 2">2

    <div class="hide">

      <h3>Text item 2</h3>

    </div>

  </i>

  <i class="hover pin 3">3

    <div class="hide">

      <h3>Text item 3</h3>

    </div>

  </i>

  <i class="hover pin 4">4

    <div class="hide">

      <h3>Text item 4</h3>

    </div>

  </i>

</div>

.hide {

    display: none;

}


i:hover > .hide {

    display: block;

} 

    <div style="display: flex">

  <i class="hover pin 1">1

    <div class="hide">

      <h3>Text item 1</h3>

    </div>

  </i>

  <i class="hover pin 2">2

    <div class="hide">

      <h3>Text item 2</h3>

    </div>

  </i>

  <i class="hover pin 3">3

    <div class="hide">

      <h3>Text item 3</h3>

    </div>

  </i>

  <i class="hover pin 4">4

    <div class="hide">

      <h3>Text item 4</h3>

    </div>

  </i>

</div>


查看完整回答
反對 回復 2024-01-22
?
牛魔王的故事

TA貢獻1830條經驗 獲得超3個贊

如果您不想使用 JS（發布的其他答案也可以），您可以使用:target選擇器。需要注意的是用戶需要單擊該元素。


div.text {

  display: none;

}


div:target {

  display: block;

}


.pin {

margin-left: 15px;

}

<div>

  <div>

    <section>

      <figure>

        <a href="#text1" class="pin">1</i>

        <a href="#text2" class="pin">2</i>

        <a href="#text3" class="pin">3</i>

        <a href="#text4" class="pin">4</i>

      </figure>

    </section>

  </div>            

  <div class="text" id="text1">

    <h3>Text item 1</h3>

  </div>

  <div class="text" id="text2">

    <h3>Text item 2</h3>

  </div>

  <div class="text" id="text3">

    <h3>Text item 3</h3>

  </div>

  <div class="text" id="text4">

    <h3>Text item 4</h3>

  </div>

</div>


查看完整回答
反對 回復 2024-01-22
  • 3 回答
  • 0 關注
  • 242 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

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

 公眾號

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