在父悬停时旋转 span 元素边框

Question

我在一个 div 中有 3 条水平线。当我将鼠标悬停在封闭的 div 上时，我想旋转第一行和最后一行以形成 +（加号）。

目前，当您将鼠标悬停在第一行和最后一行上时，它们会旋转 90 度，但是当我将鼠标悬停在 div 内的任何位置时，我希望这些行旋转。我不确定是否单独使用 CSS3 可以做到这一点，或者我是否需要使用 jQuery。

Here is a fiddle以下：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  padding-top: 15px;
}
div .bar {
  border-bottom: 5px solid #ffffff;
  height: 10px;
  width: 50px;
  display: block;
  margin: 5px auto;
}
div .bar:first-child:hover {
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
}
div .bar:last-child:hover {
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

<div>
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</div>

Answer 1

为父 div 提供 :hover 伪类并定位其子级 — div:hover children

---

也就是说，我很喜欢流畅的动画；这就是我在本示例中所关注的内容，同时减少了所需的标记。

让我们做这个 - 中间的笔画消失，底部的笔画完成 360 度旋转，最终在中间。右边的两个例子更进一步。这些是低级 gif，在下面的演示中看起来要好得多！

HTML

只需要一个 HTML 元素：

<div></div>

CSS

• 第一个和第三个笔划是用:before and :after pseudo elments 创建的。

• 中间笔画是用:before 的box shadow property 创建的。他们创建的内容与此相同：

  <div>
    <div>I am :before</div>
  
    I am an illusion created by box-shadow
  
    <div>I am :after</div>
  </div>
  

• 平滑过渡由div:before, div:after { transition: all 0.3s; }给出

完整示例 - 简单过渡

div:before,
div:after {
  transition: all 0.3s;
}
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  cursor: pointer
}
div:before,
div:after {
  content: '';
  height: 5px;
  width: 50px;
  display: block;
  position: absolute;
  background: #FFF;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  transform: rotate(0);
}
div:before {
  margin-top: -20px;
  box-shadow: 0 20px 0 #FFF;
}
div:after {
  margin-top: 20px;
}
div:hover:after {
  margin-top: 0;
  transform: rotate(360deg);
}
div:hover:before {
  margin-top: 0;
  transform: rotate(90deg);
  box-shadow: none;
}

<div></div>

更多示例

你可以用这个基本概念制作各种动画：

h2 {
  display: inline-block;
  vertical-align: middle;
  font-size: 0.8em;
}

div,
div:before,
div:after {
  transition: all 0.3s;
}
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  margin: 10px;
}
div:before,
div:after {
  content: '';
  height: 5px;
  width: 50px;
  display: block;
  position: absolute;
  background: #FFF;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  transform: rotate(0);
}
div:before {
  margin-top: -20px;
  box-shadow: 0 20px 0 #FFF;
}
div:after {
  margin-top: 20px;
}
div.one:hover:after {
  margin-top: 0;
  transform: rotate(360deg);
}
div.one:hover:before {
  margin-top: 0;
  transform: rotate(450deg);
  box-shadow: none;
}
div.two:hover {
  border-radius: 50%;
  transform: rotate(180deg);
}
div.two:hover:after {
  margin-top: -3px;
  transform: rotate(360deg);
  width: 30px;
  margin-left: -16px;
}
div.two:hover:before {
  margin-top: -3px;
  transform: rotate(450deg);
  box-shadow: none;
  width: 30px;
  margin-left: -16px;
}
div.three {
  box-shadow: 0 0 1px #F00;
}
div.three:hover {
  border-radius: 50%;
  transform: rotate(360deg);
  box-shadow: 0 0 30px #F00;
  -webkit-animation: pulse 1s infinite;
  animation: pulse 1s infinite;
}
div.three:hover:after {
  margin-top: -3px;
  transform: rotate(360deg);
  width: 30px;
  margin-left: -16px;
}
div.three:hover:before {
  margin-top: -3px;
  transform: rotate(450deg);
  box-shadow: none;
  width: 30px;
  margin-left: -16px;
  
}
@-webkit-keyframes pulse {
  0% {
    transform: scale(1);  
    box-shadow: 0 0 5px #F00;
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 30px #F00;
  }
  100% {
    transform: scale(1);  
    box-shadow: 0 0 5px #F00;
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);  
    box-shadow: 0 0 5px #F00;
  }
  50% {
    transform: scale(1.05);  
    box-shadow: 0 0 30px #F00;
  }
  100% {
    transform: scale(1);  
    box-shadow: 0 0 5px #F00;
  }
}

<h2>Spinny</h2>
<div class="one"></div>

<h2>Circular Ripple</h2>
<div class="two"></div>

<h2>Heartbeat</h2>
<div class="three"></div>

Answer 2

使用Pseudo elements 和box shadow

div {
    width: 100px;
    height: 100px;
    background-color: red;
    padding-top:15px;
    position: relative;
}
div:before, div:after{
    content: "";
    position:absolute;
    width:80px;
     height:8px;
    background: white;
}
div:after{
    display:none;
}
div:before{
    left:10px;
    top:30px;
    box-shadow: 0 20px 0 white,0  40px white
}
div:hover:before{
    box-shadow:none;
    top:50px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
div:hover:after{
    display:block;
    left:10px;
    top:50px;
}

<div></div>

如果你想避免变换和盒子阴影，你可以这样做

div {
    width: 100px;
    height: 100px;
    background-color: red;
    padding-top:15px;
    position: relative;
}
div:before, div:after{
    content: "";
    position:absolute;
}
div:after{
    width:80px;
    height:8px;
    background: white;
    top: 50px;
    left:10px;
}
div:before{
    left:10px;
    top:30px;
    width:80px;
    height:34px;
    border-top: 8px solid white;
    border-bottom: 8px solid white;
}
div:hover:before{
    border:none;
    height:80px;
    width:8px;
    background:white;
    left:44px;
    top:20px
}

<div></div>

Answer 3

悬停时匹配 div 中第一个栏的规则如下所示

div:hover .bar:first-child

不是

div .bar:first-child:hover

fiddle