我正在尝试在列表项上创建悬停效果。当我将鼠标悬停在菜单项上时,圆圈应向内移动。但是,就我而言,一切都向内移动。
我的代码:
.career li{
list-style-image:url('../images/arrow-right.png');
margin-left: -15px;
font-size:25px;
font-weight:bold;
color: #606b72;
line-height:43px;
}
.career li:hover{
transform: translate(5px,0px) rotate(-0deg);
-webkit-transition: -webkit-transform 337ms ease-in-out;
transition: -webkit-transform 337ms ease-in-out;
transition: transform 337ms ease-in-out;
transition: transform 337ms ease-in-out,-webkit-transform 337ms ease-in-out;
}
<ul class="career">
<li><a>Frontend Developer</a></li>
<li><a>Kubernetes/Docker Expert</a> </li>
<li><a>DevOps Engineer</a></li>
<li><a>Software Quality Assurance Engineer</a></li>
<li><a>Frontend developer</a></li>
</ul>
有人可以帮助我解决此问题。圆圈应向内移动。谢谢。
答案 0 :(得分:1)
您不能单独为默认列表项目符号设置动画。
我用list-style: none
删除了默认的项目符号,并向您的包含项目符号字符的列表项添加了::before
伪元素,可以将其单独设置为动画元素,因为它实际上是一个单独的(伪)元素。
.career li{
list-style-image:url('../images/arrow-right.png');
margin-left: -15px;
font-size:25px;
font-weight:bold;
color: #606b72;
line-height:43px;
list-style:none;
}
.career li::before {
content: '•';
margin-right: 1em;
display: inline-block;
}
.career li:hover::before{
transform: translate(5px,0px) rotate(-0deg);
-webkit-transition: -webkit-transform 337ms ease-in-out;
transition: -webkit-transform 337ms ease-in-out;
transition: transform 337ms ease-in-out;
transition: transform 337ms ease-in-out,-webkit-transform 337ms ease-in-out;
}
<ul class="career">
<li><a>Frontend Developer</a></li>
<li><a>Kubernetes/Docker Expert</a> </li>
<li><a>DevOps Engineer</a></li>
<li><a>Software Quality Assurance Engineer</a></li>
<li><a>Frontend developer</a></li>
</ul>
答案 1 :(得分:0)
.career li {
font-size:1.4em;
position: relative;
padding-left: 15px;
list-style: none;
}
.career li::before {
content: ".";
position: absolute;
left: 0;
}
.career li:hover::before {
transform: translate(5px,0px) rotate(-0deg);
-webkit-transition: -webkit-transform 337ms ease-in-out;
transition: -webkit-transform 337ms ease-in-out;
transition: transform 337ms ease-in-out;
transition: transform 337ms ease-in-out,-webkit-transform 337ms ease-in-out;
}
<ul class="career">
<li><a>Frontend Developer</a></li>
<li><a>Kubernetes/Docker Expert</a> </li>
<li><a>DevOps Engineer</a></li>
<li><a>Software Quality Assurance Engineer</a></li>
<li><a>Frontend developer</a></li>
</ul>