css - 动态框阴影不起作用( react )

Question

我正在尝试复制 this功能:

但是，我只想在每个按钮中包含三个 span 元素(左、右、背景)。

这是按钮的标记:

<a href="#" className="btn">Home
  <span className="r"></span>
  <span className="l"></span>
  <span className="background"></span>
</a>

这是相应的CSS:

.btn{
  background-color: #FCA311;
  display: inline-block;
  border: 1px solid black;
  height: 100%;
  margin: 0 15px;
  width: 100px;
  padding-top: 5px;
  color: #FFFFFF;
  text-decoration: none;
  position: relative;
}

.btn span {
  display: block;
  position: absolute;
  opacity: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
 }

 .btn .l {
   right: 50%;
 }

 .btn .r {
   left: 50%;
 }

 .btn .background {
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: -1;
   background-color: #fff;
   opacity: 0;
   transition: all 0.4s ease;
   box-shadow: none;
  }

  .l:hover ~ .background  {
    box-shadow: 10px 10px 10px #fff;
    opacity: 1;
  }

  .r:hover ~ .background {
    box-shadow: -10px 10px 10px #fff;
    opacity: 1;
  }

我尝试围绕“.l”和“.r”跨度元素实现该技术来检测悬停并相应地调整“.background”跨度的框阴影。我不知道出了什么问题。如果有人可以澄清，那就太好了。

Answer 1

问题是z-index，看这段代码就很容易理解

这里我将 z-index 应用到 backgrounder higher 和其他 并且左右的z-index高于背景

.container{
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid black;
  height: 100px;
  overflow: hidden;
  background-color: #fff;
}

.branding,.navigation{
  margin: 0 5px;
  text-align: center;
}

h1,h2{
  margin: 0;
  padding: 0;
}

ul{
  list-style: none;
  height: 30%;
  position: relative;
}

.btn{
  background-color: black;
  display: inline-block;
  border: 1px solid black;
  height: 100%;
  margin: 0 15px;
  width: 100px;
  padding-top: 5px;
  color: #fff;
  text-decoration: none;
  position: relative;
}

.btn span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.btn .l {
  right: 50%;
      z-index: 556;
}

.btn .r {
  left: 50%;
      z-index: 556;
}

.btn .background {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 555;
  transition: box-shadow 320ms;
}

.l:hover ~ .background  {
  box-shadow: 1px -1px 0 #2c3e50, 2px -2px 0 #2c3e50, 3px -3px 0 #2c3e50, 4px -4px 0 #2c3e50, 5px -5px 0 #2c3e50, 6px -6px 0 #2c3e50, 7px -7px 0 #2c3e50, 8px -8px 0 #2c3e50, 9px -9px 0 #2c3e50, 10px -10px 0 #2c3e50;
}

.r:hover ~ .background {
  box-shadow: -1px -1px 0 #2c3e50, -2px -2px 0 #2c3e50, -3px -3px 0 #2c3e50, -4px -4px 0 #2c3e50, -5px -5px 0 #2c3e50, -6px -6px 0 #2c3e50, -7px -7px 0 #2c3e50, -8px -8px 0 #2c3e50, -9px -9px 0 #2c3e50, -10px -10px 0 #2c3e50;
}


.navigation{
  display: flex;
  align-items: flex-end;
}

.branding{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<div class='container'>
        <div class='branding'>
          <h1></h1>
          <h2>Lorem Ipsum</h2>
        </div>
        <div class='navigation'>
          <ul>

            <a href="#" class="btn">Home
              <span class="r"></span>
              <span class="l"></span>
              <span class="background"></span>
            </a>

            <a href="#" class="btn">About
              <span class="r"></span>
              <span class="l"></span>
              <span class="background"></span>
            </a>

            <a href="#" class="btn">Contact
              <span class="r"></span>
              <span class="l"></span>
              <span class="background"></span>
            </a>

          </ul>
        </div>
      </div>