当我点击 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>

Answer 2

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