html - 使用 CSS 使内容消失
问题描述
我正在尝试仅在某些测试中使用 HTML 和 CSS。单击圆圈后,我能够让列表出现在一个框中。我遇到的问题是当圆圈不活动时,列表仍然可以点击。如果您将鼠标悬停在右下角,您将能够单击列表并激活它。有没有办法让它只有在出现框时才可点击?包括未激活圆圈时列表所在区域的图片。感谢您的任何帮助。
html {
background: #1a1a1a;
color: #e5e5e5;
text-align: left;
font-family: Univers, Futura, "Trebuchet MS", Arial, sans-serif;
}
body {
max-width: 1200px;
overflow-x: hidden;
}
.description {
max-width: 600px;
margin: 0 auto;
color: rgba(229, 229, 229, 0.7);
}
div {
position: relative;
box-sizing: border-box;
}
p {
font-size: 9pt;
margin-bottom: 1pt;
margin-top: 2.5pt;
margin-left: 2px;
z-index: 5;
}
a {
color: inherit;
text-decoration: none;
}
label {
font-size: 10pt;
margin-bottom: 0pt;
margin-top: 0pt;
margin-left: 8px;
color: orange;
font-weight: bold;
}
/*
.centered {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
*/
.test {
position: sticky;
top: 0px;
right: 2px;
}
.centered-y {
position: absolute;
width: 100%;
height: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.distribution-map {
position: relative;
width: 100%;
padding: 20px;
box-sizing: border-box;
margin: 0 auto;
}
.distribution-map .map-point {
cursor: pointer;
outline: none;
z-index: 0;
position: absolute;
width: 13px;
height: 13px;
border-radius: 20px;
opacity: 0.8;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-moz-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
-o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s;
transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
background: rgba(26, 26, 26, 0.85);
border: 2.5px solid #cf2045;
}
.distribution-map .map-point .content {
opacity: 0;
transition: opacity 0.25s ease-in-out;
width: 100%;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
overflow: overlay;
}
.distribution-map .map-point:active,
.distribution-map .map-point:focus {
margin: 0;
padding: 0;
opacity: 1;
width: 100px;
height: 100px;
color: #e5e5e5;
z-index: 1;
transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
}
.distribution-map .centered-y .map-point:active .content ,
.distribution-map .map-point:focus .content {
opacity: 1;
transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
overflow: hidden;
}
.distribution-map .map-point:active .content a:hover,
.distribution-map .map-point:active .content a:active,
.distribution-map .map-point:focus .content a:hover,
.distribution-map .map-point:focus .content a:active {
color: #afe1fa;
}
<div class="distribution-map">
<button type="radio" class="map-point" style="top:130%;left:39%">
<div class="content">
<div class="centered-y">
<ol>
<li>Site01</li>
<li>Site02</li>
<li>Site03</li>
<li>Site04</li>
</ol>
</div>
</div>
</button>
</div>
解决方案
设置一个元素opacity
不会导致它以您可能期望的方式隐藏。它仍然可以与之交互,就好像它仍然完全不透明一样。对于某些类型的元素,这包括能够通过键盘导航到它们,并且它们也将对屏幕阅读器等辅助技术可见。
当我需要隐藏或显示带有动画的元素时,我通常使用的方法是对元素的 进行动画处理visibility
,因为与display
属性不同,visibility
值可以被动画化。
以下是我喜欢使用的标准动画,它可以使元素在动画周期结束时立即出现或消失:
@keyframes becomeVisible {
0% { visibility: visible; }
100% { visibility: visible; }
}
@keyframes becomeHidden {
0% { visibility: visible; }
100% { visibility: visible; }
100% { visibility: hidden; }
}
@media (prefers-reduced-motion) {
/* becomeVisible already suits prefers-reduced-motion */
@keyframes becomeHidden {
0% { visibility: hidden; }
100% { visibility: hidden; }
}
}
不幸的是,由于可见性属性被插值的方式,它更难以与转换一起使用,因为它会在转换的中间点切换值。这就是为什么我更喜欢通过动画来代替。
如果您以前没有使用过 CSS 动画,这里有一个有用的参考和指南:使用 CSS 动画
推荐阅读
- amazon-web-services - EC2 窗口实例 - 粘贴文件
- php - PHP mysqli 和 SSL
- javascript - 不和谐.js | 您只能批量删除 14 天以内的邮件
- html - 为什么rowspan“3”会删除一整行并将其设置为“2”
- asp.net-core - AspNet Core 3.0-3.1 无法捕获未处理的异常(应用程序崩溃)
- discord - Discord.js 将 DM 消息转发到特定频道
- dockerfile - GeoServer is not recognizing the copied gwc-layers files
- javascript - d3、更新多条路径
- reporting-services - Sum 出现两次
- kotlin - 如何使 CoroutineContext.Element 不通过 Kotlin 中的启动/异步传播