Question

首先这是我的代码：

body{
  background: #00BCD4;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="18" viewBox="0 0 100 18"%3E%3Cpath fill="%239C92AC" fill-opacity="0.4" d="M61.82 18c3.47-1.45 6.86-3.78 11.3-7.34C78 6.76 80.34 5.1 83.87 3.42 88.56 1.16 93.75 0 100 0v6.16C98.76 6.05 97.43 6 96 6c-9.59 0-14.23 2.23-23.13 9.34-1.28 1.03-2.39 1.9-3.4 2.66h-7.65zm-23.64 0H22.52c-1-.76-2.1-1.63-3.4-2.66C11.57 9.3 7.08 6.78 0 6.16V0c6.25 0 11.44 1.16 16.14 3.42 3.53 1.7 5.87 3.35 10.73 7.24 4.45 3.56 7.84 5.9 11.31 7.34zM61.82 0h7.66a39.57 39.57 0 0 1-7.34 4.58C57.44 6.84 52.25 8 46 8S34.56 6.84 29.86 4.58A39.57 39.57 0 0 1 22.52 0h15.66C41.65 1.44 45.21 2 50 2c4.8 0 8.35-.56 11.82-2z"%3E%3C/path%3E%3C/svg%3E');
}
.conteiner{
  background: #E0F7FA;
  height: 500px;
  width: 600px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 5px 20px rgba(0,0,0,0.4);
  border-radius: 15px;
}

.button{
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-decoration: none;
  color: #fff;
  font-size: 30px;
  font-family: Arial;
  font-weight: 700;
  height: 90px;
  width: 190px;
  background: #00ACC1;
  border-radius: 15px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 10px rgba(0,0,0,0.4);
  transition:  0.6s;
}

.button::before{
  content:'';
  position: absolute;
  top:0;
  left: 0;
  height: 100%;
  width: 45%;
  background: #00B6CC;
  z-index: -1;
  transform: scale(0);
  transform-origin: top left;
  transition: transform 0.5s;
  border-radius: 15px;
}
.button::after{
  content:'';
  position: absolute;
  top:0;
  right: 0;
  height: 100%;
  width: 45%;
  background: #00A1B5;
  z-index: -1;
  transform: scale(0);
  transform-origin: bottom right;
  transition: transform 0.5s;
  border-radius: 15px;
}

.button:hover:after{
  transform: scale(1);
  transform-origin: bottom right;
  
}

.button:hover:before{
  transform: scale(1);
  transform-origin: top left;
}

.button:hover{
  height: 100%;
  width: 100%;
  color: rgba(0,0,0,0);
}

i.fa-user{
  position: absolute;
  top:50%;
  left: 20%;
  transform:translateY(-50%);
  font-size: 40px;
  color: white;
  opacity: 0;
  transition: .5s;
}
i.fa-cogs{
  position: absolute;
  top:50%;
  right: 20%;
  transform:translateY(-50%);
  font-size: 40px;
  color: white;
  opacity: 0;
  transition: .5s;
}
.button:hover  i{
  opacity: 1;
}
.fa-user:hover + .button:before{
  width: 90%;
}

<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
</head>

<div class="conteiner">
  
  <a href="#" class="button">
  Hover me
   <i class="fas fa-user"></i>
    <i class="fas fa-cogs"></i>
  </a>
   
</div>

因此，我的.button（锚点）上具有：before和：after伪元素。当鼠标悬停在.button上时，我会显示一些“真棒”图标。我的：before和：after也是完整高度和45％宽度。因此，我想做的是将鼠标悬停在图标上时，伪元素：before或：after的宽度为90％，另一个伪元素则向左或向右推。

但是主要问题是，当我将鼠标悬停在图标上时如何触发伪元素更改。

谢谢。

Answer 1

由于伪元素不是实际的DOM元素，因此悬停将不会直接应用于此元素。

但是，如果您需要更改悬停图标的宽度，则可以将图标放在一些真实的DOM元素中，例如<span>等，然后应用悬停效果。

在将鼠标悬停在另一个元素上之前，如何更改：

1 个答案: