html - 我有一个代码,我需要将“a”标签更改为“li”。当我这样做时,css动画停止工作
问题描述
我想将(a)标签更改为(li)。当我这样做时,css动画停止工作。为什么?这不是我第一次将(a)标签更改为(li),但我从来没有遇到过这样的问题。当然你需要在 css 中进行操作,但这次我无法解决这个问题。我怎样才能改变它?
<div class="panel" id="slice">
<div class="panel__content">
<a href="#home">Close me.</a>
</div>
</div>
<div class="menu">
<a class="menu__link" href="#slice" data-hover="Slice">Slice</a>
</div>
.menu {
position: fixed;
width: 100vw;
pointer-events: none;
margin-top: 10vh;
text-align: center;
z-index: 2; }
.menu__link {
display: inline-block;
text-decoration: none;
border: 2px solid #263238;
color: #263238;
pointer-events: auto;
line-height: 40px;
position: relative;
padding: 0 50px;
box-sizing: border-box;
margin: 0;
user-select: none;
overflow: hidden;
border-radius: 50px;
.panel {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
z-index: 999;
color: #000;
box-sizing: border-box;
background-color: #ECEFF1; }
.panel__content {
opacity: 0;
will-change: margin-top;
transition: all 700ms;
transition-delay: 600ms;
padding: 100px 200px;
margin-top: -5%; }
.panel:target .panel__content {
opacity: 1;
margin-top: 0; }
.panel#slice {
background-color: #E53935;
transition: all 800ms cubic-bezier(0.190, 1.000, 0.560, 1.000);
transform: translate3d( 0, -100%, 0 ); }
.panel#slice:target {
transform: translate3d( 0, 0, 0 ); }
解决方案
您必须为间距重新设置无序列表的样式,但也许不是直接用 替换菜单的<a>
元素<li>
,而是可以将这些<a>
元素包含在结果列表项中。
这将保留所有:target
功能并为您提供列表(用于语义?)。
编辑:当然,如果您的菜单只能包含<li>
.
/* basic style definition */
/* •••••••••••••••••••••••••••••••• */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: 'Roboto Slab', serif;
}
h1 {
margin: 0;
user-select: none;
text-align: center;
font-weight: 300;
}
p,
{
font-weight: 300;
color: #546E7A;
user-select: none;
text-align: center;
margin: 0;
}
a {
text-align: center;
text-decoration: none;
color: #FFF;
}
/* Navigation menu */
/* •••••••••••••••••••••••••••••••• */
.menu {
position: fixed;
width: 100vw;
pointer-events: none;
margin-top: 10vh;
text-align: center;
z-index: 2;
}
/* Menu link item */
.menu__link {
display: inline-block;
text-decoration: none;
border: 2px solid #263238;
color: #263238;
pointer-events: auto;
line-height: 40px;
position: relative;
padding: 0 50px;
box-sizing: border-box;
margin: 0;
user-select: none;
overflow: hidden;
border-radius: 50px;
&::before {
content: attr(data-hover);
background-color: #263238;
color: #FFF;
position: absolute;
top: 100%;
bottom: 0;
left: 0;
transition: all 300ms cubic-bezier(0.190, 1.000, 0.560, 1.000);
right: 0;
}
&:hover::before {
top: 0;
}
}
/* Panels Style*/
/* •••••••••••••••••••••••••••••••• */
/* Common panel style */
.panel {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
z-index: 999;
color: #000;
box-sizing: border-box;
background-color: #ECEFF1;
}
/* panel content (only for animation delay after open) */
.panel__content {
opacity: 0;
will-change: margin-top;
transition: all 700ms;
transition-delay: 600ms;
padding: 100px 200px;
margin-top: -5%;
}
/* Panel content animation after open */
.panel:target .panel__content {
opacity: 1;
margin-top: 0;
}
/* Specific "Home "panel */
/* •••••••••••••••••••••••••••••••• */
.panel#home {
z-index: 1;
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, #CFD8DC 100%);
}
/* Specific panel "Slice" */
/* •••••••••••••••••••••••••••••••• */
.panel#slice {
background-color: #E53935;
transition: all 800ms cubic-bezier(0.190, 1.000, 0.560, 1.000);
transform: translate3d( 0, -100%, 0);
}
.panel#slice:target {
transform: translate3d( 0, 0, 0);
}
/* Specific panel "Fade" effect */
/* •••••••••••••••••••••••••••••••• */
.panel#fade {
background-color: #00C853;
opacity: 0;
transition: all 800ms;
pointer-events: none;
}
.panel#fade:target {
opacity: 1;
pointer-events: auto;
}
<!-- Home Panel -->
<div class="panel" id="home">
<h1>Pure CSS panels</h1>
<p>by Mattia Astorino</p>
</div>
<div class="panel" id="slice">
<div class="panel__content">
<a href="#home">
Close me.
</a>
</div>
</div>
<div class="panel" id="fade">
<div class="panel__content">
<a href="#home">Close me.</a>
</div>
</div>
<!-- Navigation -->
<div class="menu">
<ul>
<li>
<a class="menu__link" href="#slice" data-hover="Slice">Slice</a>
</li>
<li>
<a class="menu__link" href="#fade" data-hover="Fade">Fade</a>
</li>
</ul>
</div>
推荐阅读
- javascript - c3图表:数据来自url时出错
- arrays - 从 Json Angular 5 推入数组
- python - 如何计算条目之间的时间差?
- swift - 如何在 swift 中为服务器登录创建正确的完成处理程序?
- php - 如何停止在 PHP 中的 Excel 文件中插入空白行?
- android - 使用 TravisCI 构建 expo Android 应用程序
- html - 点击时离子输入复制和转换?
- java - 在 Java 中寻找最短路径 - Dijkstra 算法
- microsoft-ajax-minifier - 从哪里获得 ajaxmin.exe?
- android - 在 Fragment 外部的类中调用 getViewById 会生成空指针异常和内容