为了账号安全，请及时绑定邮箱和手机立即绑定

如何在将鼠标悬停在特定图形项目上时显示/隐藏 div？

首页 猿问 如何在将鼠标悬停在特定图形项目上时...

如何在将鼠标悬停在特定图形项目上时显示/隐藏 div？

Html5
慕运维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 href="https://fonts.googleapis.com/css?family=Montserrat">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 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 href="https://fonts.googleapis.com/css?family=Montserrat">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 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 href="https://fonts.googleapis.com/css?family=Montserrat">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 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 关注
  • 116 浏览

添加回答

了解更多

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信