如何在将鼠标悬停在特定图形项目上时显示/隐藏 div？
当我将鼠标悬停在特定的图形项目上时，我试图显示或隐藏 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>
慕运维8079593浏览 117回答 3
3回答
-
慕容708150
虽然我想您可以纯粹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> -
慕妹3146593
你可以尝试这个快速的 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> -
牛魔王的故事
如果您不想使用 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>
随时随地看视频慕课网APP
相关分类
Html5