html - 当鼠标悬停在三角形上时，如何使 2 个按钮出现？
问题描述
我正在制作一个食物金字塔，当您将鼠标悬停在金字塔的某些部分上时，会出现按钮，但我不确定如何对其进行编码。
我希望.button1and.button2出现在鼠标悬停时.triangle，然后我计划做更多的按钮，当你悬停在每个梯形上时出现。
以下是代码。
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="assignment01.css">
</head>
<body>
<h1 style="font-family: helvetica">
<center>Figure 1</center>
</h1>
<div class="triangle">
<div class="circle1 "></div>
<div class="button1"><span>+</span></div>
<div class="button2"><span>-</span></div>
</div>
<div class="trapezoid ">
<div class="circle2 "></div>
</div>
<div class="trapezoid1 ">
<div class="circle3 "></div>
</div>
<div class="trapezoid2 ">
<div class="circle4 "></div>
</div>
<div class="trapezoid3 ">
<div class="circle5 "></div>
</div>
<div class="trapezoid4 ">
<div class="circle6 "></div>
</div>
<h2 style="font-family: helvetica">
<center>My Food Pyramid</center>
</h2>
<h2 style="font-family: helvetica">
<center id="datetime"></center>
</h2>
<script>
var dt = new Date();
document.getElementById("datetime").innerHTML = dt.toLocaleDateString();
</script>
</body>
</html>
CSS
.triangle {
border-bottom: 150px solid #FF6347;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
height: 0;
width: 0;
margin-left: auto;
margin-right: auto;
white-space: nowrap;
display: block;
}
.trapezoid {
border-bottom: 100px solid #f58c57;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
height: 0;
width: 220px;
margin-left: auto;
margin-right: auto;
padding-bottom: 20px;
}
.trapezoid1 {
border-bottom: 100px solid #fff894;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
height: 0;
width: 360px;
margin-left: auto;
margin-right: auto;
padding-bottom: 20px;
}
.trapezoid2 {
border-bottom: 100px solid #83ccde;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
height: 0;
width: 480px;
margin-left: auto;
margin-right: auto;
}
.trapezoid3 {
border-bottom: 100px solid #a87d5c;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
height: 0;
width: 600px;
margin-left: auto;
margin-right: auto;
}
.trapezoid4 {
border-bottom: 100px solid #9effa6;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
height: 0;
width: 720px;
margin-left: auto;
margin-right: auto;
}
.circle1 {
height: 45px;
width: 45px;
background-color: #ffffff;
border-radius: 50%;
display: inline-block;
margin-top: 100px;
margin-left: -22px;
margin-right: auto;
opacity: 0.7;
}
.circle2 {
height: 50px;
width: 50px;
background-color: #ffffff;
border-radius: 50%;
display: inline-block;
margin-top: 45px;
margin-left: 87px;
margin-right: auto;
opacity: 0.7;
}
.circle3 {
height: 50px;
width: 50px;
background-color: #ffffff;
border-radius: 50%;
display: inline-block;
margin-top: 45px;
margin-left: 158px;
margin-right: auto;
opacity: 0.7;
}
.circle4 {
height: 50px;
width: 50px;
background-color: #ffffff;
border-radius: 50%;
display: inline-block;
margin-top: 25px;
margin-left: 219px;
margin-right: auto;
opacity: 0.7;
}
.circle5 {
height: 50px;
width: 50px;
background-color: #ffffff;
border-radius: 50%;
display: inline-block;
margin-top: 25px;
margin-left: 279px;
margin-right: auto;
opacity: 0.7;
}
.circle6 {
height: 50px;
width: 50px;
background-color: #ffffff;
border-radius: 50%;
display: inline-block;
margin-top: 25px;
margin-left: 339px;
margin-right: auto;
opacity: 0.7;
}
.button1 {
background-color: white;
border: none;
padding: 20px;
height: 5px;
width: 5px;
display: inline-block;
margin-left: 0px;
cursor: pointer;
border-radius: 50%;
position: relative;
left: 0px;
top: -18px;
opacity: 0.7;
text-align: center;
text-decoration: none;
line-height: 5px;
}
.button2 {
background-color: white;
border: none;
padding: 20px;
height: 5px;
width: 5px;
display: inline-block;
margin-left: 0px;
cursor: pointer;
border-radius: 50%;
position: relative;
left: -147px;
top: -18px;
opacity: 0.7;
text-align: center;
text-decoration: none;
line-height: 5px;
}
.triangle:hover+.button1 {
display: inline-block;
}
解决方案
您可以为每个元素定义一个类似于 'piece' 的类，当您将鼠标悬停在此类的任何元素上时，您可以将 display:none 更改为 display: inline-block 按钮。就像上面的例子：
.triangle {
border-bottom: 150px solid #FF6347;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
height: 0;
width: 0;
margin-left: auto;
margin-right: auto;
white-space: nowrap;
display: block;
}
.trapezoid {
border-bottom: 100px solid #f58c57;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
height: 0;
width: 220px;
margin-left: auto;
margin-right: auto;
padding-bottom: 20px;
}
.trapezoid1 {
border-bottom: 100px solid #fff894;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
height: 0;
width: 360px;
margin-left: auto;
margin-right: auto;
padding-bottom: 20px;
}
.trapezoid2 {
border-bottom: 100px solid #83ccde;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
height: 0;
width: 480px;
margin-left: auto;
margin-right: auto;
}
.trapezoid3 {
border-bottom: 100px solid #a87d5c;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
height: 0;
width: 600px;
margin-left: auto;
margin-right: auto;
}
.trapezoid4 {
border-bottom: 100px solid #9effa6;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
height: 0;
width: 720px;
margin-left: auto;
margin-right: auto;
}
.circle1{
height: 45px;
width: 45px;
background-color: #ffffff;
border-radius: 50%;
display: inline-block;
margin-top: 100px;
margin-left: -22px;
margin-right: auto;
opacity: 0.7;
}
.circle2{
height: 50px;
width: 50px;
background-color: #ffffff;
border-radius: 50%;
display: inline-block;
margin-top: 45px;
margin-left: 87px;
margin-right: auto;
opacity: 0.7;
}
.circle3{
height: 50px;
width: 50px;
background-color: #ffffff;
border-radius: 50%;
display: inline-block;
margin-top: 45px;
margin-left: 158px;
margin-right: auto;
opacity: 0.7;
}
.circle4{
height: 50px;
width: 50px;
background-color: #ffffff;
border-radius: 50%;
display: inline-block;
margin-top: 25px;
margin-left: 219px;
margin-right: auto;
opacity: 0.7;
}
.circle5{
height: 50px;
width: 50px;
background-color: #ffffff;
border-radius: 50%;
display: inline-block;
margin-top: 25px;
margin-left: 279px;
margin-right: auto;
opacity: 0.7;
}
.circle6{
height: 50px;
width: 50px;
background-color: #ffffff;
border-radius: 50%;
display: inline-block;
margin-top: 25px;
margin-left: 339px;
margin-right: auto;
opacity: 0.7;
}
.button1 {
background-color: white;
border: none;
padding: 20px;
height: 5px;
width: 5px;
display: none;
margin-left: 0px;
cursor: pointer;
border-radius: 50%;
position: relative;
left: 0px;
top: -18px;
opacity: 0.7;
text-align: center;
text-decoration: none;
line-height: 5px;
}
.button2{
background-color: white;
border: none;
padding: 20px;
height: 5px;
width: 5px;
display: none;
margin-left: 0px;
cursor: pointer;
border-radius: 50%;
position: relative;
left: -147px;
top: -18px;
opacity: 0.7;
text-align: center;
text-decoration: none;
line-height: 5px;
}
.piece:hover .button1, .piece:hover .button2 {
display: inline-block;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="assignment01.css">
</head>
<body>
<h1 style = "font-family: helvetica"><center>Figure 1</center></h1>
<div class="triangle piece">
<div class="circle1 "></div>
<div class="button1"><span>+</span></div>
<div class="button2"><span>-</span></div>
</div>
<div class="trapezoid piece">
<div class="circle2 "></div>
<div class="button1"><span>+</span></div>
<div class="button2"><span>-</span></div>
</div>
<div class="trapezoid1 piece">
<div class="circle3 "></div>
<div class="button1"><span>+</span></div>
<div class="button2"><span>-</span></div>
</div>
<div class="trapezoid2 piece">
<div class="circle4 "></div>
<div class="button1"><span>+</span></div>
<div class="button2"><span>-</span></div>
</div>
<div class="trapezoid3 piece">
<div class="circle5 "></div>
<div class="button1"><span>+</span></div>
<div class="button2"><span>-</span></div>
</div>
<div class="trapezoid4 piece">
<div class="circle6 "></div>
<div class="button1"><span>+</span></div>
<div class="button2"><span>-</span></div>
</div>
<h2 style = "font-family: helvetica"><center>My Food Pyramid</center></h2>
<h2 style = "font-family: helvetica"><center id="datetime"></center></h2>
<script>
var dt = new Date();document.getElementById("datetime").innerHTML = dt.toLocaleDateString();
</script>
</body>
</html> OBS.: 只需纠正样式，因为第二块按钮 2 向左太多。
推荐阅读
- c# - Wpf 依赖属性动态键向下
- django - 在 html 中显示服务器错误
- vue.js - Vue组件不显示嵌套的div
- sql-server - 关键字“AS”附近的语法不正确。在 SQL Server 中
- java - parseUnsignedInt - 这个方法有什么问题？
- json - 带有嵌套 JSON 的 JQ
- c++ - 在 constexpr 构造函数中获取特殊的指针值（类似于“第二个”nullptr）
- crystal-reports - 停止正在运行的程序会导致 IDE 使用 Crystal Report XI Chart Report 挂起
- c# - .NET Core 是否支持 Web 套接字？抛出“System.Net.WebSockets.WebSocketException 异常
- android - 以编程方式在 Android 中运行命令管道