html - 为什么我的 css 转换不起作用？

Question

当我将鼠标悬停在徽标上时，我希望徽标有一个很酷的“阴影”，但它不起作用。我添加了某种类型的边框，以便当我将鼠标悬停在它上面时，它会出现但只出现在边缘上，我使用了 z-index: -1;，这样我的徽标就会出现而不是边框​​，然后当我将鼠标悬停在上面时会进行转换徽标，边框会出现在一边，但它不起作用。

HTML

<footer>
    <ul class = "bottom">
        <li><a href = "https://www.facebook.com" target="_blank"><i class = "fa fa-facebook"></i></a> 
        </li>
        <li><a href = "#" target="_blank"><i class = "fa fa-twitter"></i></a></li>
        <li><a href = "#" target="_blank"><i class = "fa fa-youtube"></i></a></li>
        <li><a href = "#" target="_blank"><i class = "fa fa-instagram"></i></a></li>
    </ul>
</footer>

CSS

footer{
   width: 100%;
   display: block;
   padding: 50px 0;
   background-color: #262626;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
}

.bottom{
   list-style: none;
   display: flex;
}

.bottom li{
   position: relative;
   display: block;
   font-size: 30px;
   height: 60px;
   width: 60px;
   border-radius: 50%;
   background: black;
   line-height: 60px;
   margin: 0 15px;
   cursor: pointer;
}

.bottom li a{
   color: #666;
}

.bottom li:before{
   position: absolute;
   content: '';
   top: 0;
   left: 0;
   background: #d35400;
   height: 100%;
   width: 100%;
   border-radius: 50%;
   z-index: -1;
   transition: .5s;
   transform: scale(0.9);
}

.bottom li a:hover:before{
   transform: scale(1.2);
   box-shadow: 0 0 15px #d35400;
}

标签： htmlcss

Answer 1

很难准确理解你想要的最终结果是什么，这很接近吗？

* {
  box-sizing: border-box;
}

footer {
  width: 100%;
  display: block;
  padding: 50px 0;
  background-color: #262626;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.bottom {
  list-style: none;
  display: flex;
}

.bottom li {
  position: relative;
  display: flex;
  font-size: 30px;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background: black;
  line-height: 60px;
  margin: 0 15px;
  transition: all 0.2s ease;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}

.bottom li a {
  color: #666;
  display: flex;
  text-decoration: none;
}

.bottom li:hover {
  transform: scale(1.2);
  box-shadow: 0 0 15px #d35400;
  border: 2px solid #d35400;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<footer>
  <ul class="bottom">
    <li><a href="https://www.facebook.com" target="_blank"><i class = "fa fa-facebook"></i></a>
    </li>
    <li><a href="#" target="_blank"><i class = "fa fa-twitter"></i></a></li>
    <li><a href="#" target="_blank"><i class = "fa fa-youtube"></i></a></li>
    <li><a href="#" target="_blank"><i class = "fa fa-instagram"></i></a></li>
  </ul>
</footer>