html - 单击 ul li 菜单时转换不起作用

Question

我正在尝试在列表项上创建悬停效果。当我应该将鼠标悬停在菜单项上时，圆圈应该向内移动。但是，就我而言，一切都在向内移动。

我的代码:

.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>

有人可以帮我解决这个问题吗？圆圈应该向内移动。谢谢。

Answer 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>