当我将鼠标悬停在div上时，我想调用多个悬停效果

Question

当我将鼠标悬停在div = class“component”上时，我想调用多个悬停效果。现在只有个别角色受到影响 - 这里是jsfiddle链接https://jsfiddle.net/ogrwm1zg/

<div class="container">
    <div class="component">
        <a href="/somelink">
        <ul class="grid-see">
            <li class="ot-letter-top"><span data-letter="S">S</span></li>
            <li class="ot-letter-right"><span data-letter="E">E</span></li>
            <li class="ot-letter-right"><span data-letter="E">E</span></li> 
            <li ><span class="blank-spaces" ></span></li>
        </ul>

        <ul class="grid-our">                               
            <li class="ot-letter-left"><span data-letter="O">O</span></li>
            <li class="ot-letter-left"><span data-letter="U">U</span></li>
            <li class="ot-letter-left"><span data-letter="R">R</span></li> 
            <li ><span class="blank-spaces" ></span></li>
         </ul>


        <ul class="grid-work"> 
            <li class="ot-letter-left"><span data-letter="W">W</span></li>
            <li class="ot-letter-left"><span data-letter="O">O</span></li>
            <li class="ot-letter-left"><span data-letter="R">R</span></li>
            <li class="ot-letter-top"><span data-letter="K">K</span></li>
        </ul>
     </a>
    </div>

</div>

Answer 1

见this工作小提琴。我还删除了很多冗余的CSS。

将:hover CSS替换为影响容器而不是单个元素。

E.g。替换选择器：

.ot-letter-top:hover span:after

有了这个：

.component:hover .ot-letter-top span:after

＆＃13;

＆＃13;

.body {
  background: white;
}

/* grid */
.grid {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  width: 100%;
}

.grid li {
  position: relative;
  float: left;
  max-height: 290px;
  text-align: center;
  padding-right: 10px;
}

/* Common styles for the letters */
.grid li span {
  display: inline-block;
  font-weight: 900;
  line-height: 1;
  position: relative;
  color: #14b9f1;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 550px;
  -ms-perspective: 550px;
  perspective: 550px;
  z-index: 1;
  font-size: 90px;
}

.component li span:before,
.component li span:after {
  position: absolute;
  content: attr(data-letter);
  line-height: inherit;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.component li span:before {
  text-shadow: none;
  color: hsla(0, 0%, 0%, 0.12);
}

/* Colors */
.ot-letter-left, .ot-letter-right {
  background: #FFF;
}

.ot-letter-left span:after, 
.ot-letter-right span:after,
.ot-letter-top span:after,
.ot-letter-bottom span:after {
  color: #FFF;
}

.ot-letter-bottom {
  background: #e95949;
}

/* Left */
.ot-letter-left span:before,
.ot-letter-left span:after,
.ot-letter-right span:before,
.ot-letter-right span:after {
  -webkit-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  transform-origin: 0 50%;
}
.ot-letter-left span:before,
.ot-letter-right span:before {
  -webkit-transform: scale(1.08, 1) skew(0deg, 1deg);
  -ms-transform: scale(1.08, 1) skew(0deg, 1deg);
  transform: scale(1.08, 1) skew(0deg, 1deg);
}
.ot-letter-left span:after,
.ot-letter-right span:after {
  text-shadow: -1px 0px 0px hsla(360, 100%, 100%, 0.1), 3px 0px 1px hsla(0, 0%, 0%, 0.4);
  -webkit-transform: rotateY(-15deg);
  -ms-transform: rotateY(-15deg);
  transform: rotateY(-15deg);
}

.component:hover .ot-letter-left span:before,
.component:hover .ot-letter-right span:before {
  -webkit-transform: scale(0.85, 1) skew(0deg, 20deg);
  -ms-transform: scale(0.85, 1) skew(0deg, 20deg);
  transform: scale(0.85, 1) skew(0deg, 20deg);
}
.component:hover .ot-letter-left span:after,
.component:hover .ot-letter-right span:after {
  -webkit-transform: rotateY(-40deg);
  -ms-transform: rotateY(-40deg);
  transform: rotateY(-40deg);
}
/* Up */
.ot-letter-top span:before,
.ot-letter-top span:after {
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
.ot-letter-top span:before {
  -webkit-transform: scale(1, 0.95) skew(-4deg, 0deg);
  -ms-transform: scale(1, 0.95) skew(-4deg, 0deg);
  transform: scale(1, 0.95) skew(-4deg, 0deg);
}
.ot-letter-top span:after {
  text-shadow: 0px 1px 0px hsla(360, 100%, 100%, 0.1), 0px -3px 1px hsla(0, 0%, 0%, 0.4);
  -webkit-transform: rotateX(-15deg);
  -ms-transform: rotateX(-15deg);
  transform: rotateX(-15deg);
}
.ot-letter-top:hover span:before {
  -webkit-transform: translateY(-0.050em) scale(1, 0.55) skew(-10deg, 0deg);
  -ms-transform: translateY(-0.050em) scale(1, 0.55) skew(-10deg, 0deg);
  transform: translateY(-0.050em) scale(1, 0.55) skew(-10deg, 0deg);
}
.component:hover .ot-letter-top span:after {
  -webkit-transform: translateY(-0.035em) rotateX(-40deg);
  -ms-transform: translateY(-0.035em) rotateX(-40deg);
  transform: translateY(-0.035em) rotateX(-40deg);
}
/* Down */
.ot-letter-bottom span:before,
.ot-letter-bottom span:after {
  -webkit-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  transform-origin: 50% 0;
}
.ot-letter-bottom span:before {
  -webkit-transform: scale(1, 1.05) skew(4deg, 0deg);
  -ms-transform: scale(1, 1.05) skew(4deg, 0deg);
  transform: scale(1, 1.05) skew(4deg, 0deg);
}
.ot-letter-bottom span:after {
  text-shadow: 0px -1px 0px hsla(360, 100%, 100%, 0.1), 0px 3px 1px hsla(0, 0%, 0%, 0.4);
  -webkit-transform: rotateX(15deg);
  -ms-transform: rotateX(15deg);
  transform: rotateX(15deg);
}
.component:hover .ot-letter-bottom span:before {
  -webkit-transform: translateY(-0.035em) scale(1, 1.2) skew(10deg, 0deg);
  -ms-transform: translateY(-0.035em) scale(1, 1.2) skew(10deg, 0deg);
  transform: translateY(-0.035em) scale(1, 1.2) skew(10deg, 0deg);
}
.component:hover .ot-letter-bottom span:after {
  -webkit-transform: translateY(0.045em) rotateX(40deg);
  -ms-transform: translateY(0.045em) rotateX(40deg);
  transform: translateY(0.045em) rotateX(40deg);
}
/* Example for media query: change number of items per row */
.blank-spaces {
  width: 20px;
}

＆＃13;

<body>
  <div class="container">
    <div class="component">
      <a href="/somelink">
        <ul class="grid">
          <li class="ot-letter-top"><span data-letter="S">S</span></li>
          <li class="ot-letter-right"><span data-letter="E">E</span></li>
          <li class="ot-letter-right"><span data-letter="E">E</span></li>
          <li><span class="blank-spaces"></span></li>
        </ul>
        <ul class="grid">
          <li class="ot-letter-left"><span data-letter="O">O</span></li>
          <li class="ot-letter-left"><span data-letter="U">U</span></li>
          <li class="ot-letter-left"><span data-letter="R">R</span></li>
          <li><span class="blank-spaces"></span></li>
        </ul>
        <ul class="grid">
          <li class="ot-letter-left"><span data-letter="W">W</span></li>
          <li class="ot-letter-left"><span data-letter="O">O</span></li>
          <li class="ot-letter-left"><span data-letter="R">R</span></li>
          <li class="ot-letter-top"><span data-letter="K">K</span></li>
        </ul>
      </a>
    </div>
  </div>
  <!-- /container -->

＆＃13;

＆＃13;

＆＃13;