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;
  }

我尝试围绕＆＃39; .l＆＃39;来实施这项技术。和＆＃39; .r＆＃39; span元素检测悬停并调整＆＃39; .background＆＃39;相应地跨越了盒子阴影。我不知道有什么不对。如果有人能够澄清这将是伟大的。

Answer 1

问题是z-index，你可以通过看到这段代码轻松理解

这里我将z-index应用于更高的背景和其他和左右的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>

动态框阴影不起作用（反应）

1 个答案: