第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

如何在將鼠標(biāo)懸停在特定圖形項(xiàng)目上時(shí)顯示/隱藏 div？

如何在將鼠標(biāo)懸停在特定圖形項(xiàng)目上時(shí)顯示/隱藏 div？

慕運(yùn)維8079593 2024-01-22 20:04:33
當(dāng)我將鼠標(biāo)懸停在特定的圖形項(xiàng)目上時(shí)，我試圖顯示或隱藏 div。具體來(lái)說(shuō)：我試圖實(shí)現(xiàn)的目標(biāo)如下：當(dāng)我將鼠標(biāo)懸停在按鈕 #1 上時(shí)，我想顯示帶有按鈕 1 文本的 div；當(dāng)我將鼠標(biāo)懸停在按鈕 #2 上時(shí)，我想顯示帶有按鈕 2 文本的 div；等等...首先，我嘗試重現(xiàn)一個(gè)簡(jiǎn)單的示例（該示例正在運(yùn)行）：<!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>然而，我無(wú)法完成這項(xiàng)工作。有誰(shuí)知道如何將此示例應(yīng)用到下面的 HTML 結(jié)構(gòu)中？?jī)H供參考：此腳本中的類用作虛擬類來(lái)描述我嘗試實(shí)現(xiàn)的目標(biāo)。<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貢獻(xiàn)1831條經(jīng)驗(yàn) 獲得超4個(gè)贊

雖然我想您可以純粹CSS出于此目的而使用，但付諸JS實(shí)踐以達(dá)到預(yù)期結(jié)果要容易得多。

<!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>


查看完整回答
反對(duì) 回復(fù) 2024-01-22
?
慕妹3146593

TA貢獻(xiàn)1820條經(jīng)驗(yàn) 獲得超9個(gè)贊

你可以嘗試這個(gè)快速的 css 技巧來(lái)實(shí)現(xiàn)你所需要的:)


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>


查看完整回答
反對(duì) 回復(fù) 2024-01-22
?
牛魔王的故事

TA貢獻(xiàn)1830條經(jīng)驗(yàn) 獲得超3個(gè)贊

如果您不想使用 JS（發(fā)布的其他答案也可以），您可以使用: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>


查看完整回答
反對(duì) 回復(fù) 2024-01-22
  • 3 回答
  • 0 關(guān)注
  • 265 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)