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>

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

2 个答案: