Question

我有一个带有按钮的垂直侧边栏。

通过悬停按钮，该按钮应该向右移动（对于标题文本）。

我是通过＆＃34;过渡：用＆＃34;

做到的

＆＃13;

   nav#navi_side a {
   display:block;
   width:30px;
   height:30px;
   background:linear-gradient(100deg, rgb(250,250,250) 0%, rgb(225,225,225) 30%, rgb(200,200,200) 70%, rgb(175,175,175) 100%);
   border-radius:5px;
   box-shadow:1px 1px 1px rgba(250,250,250,0.75), -1px -1px 1px rgba(25,25,25,0.50);
   text-align:left;
   line-height:30px;
   transition:width 1s ease-in-out;
}
nav#navi_side a:hover {
    width:150px;
    background:linear-gradient(100deg, rgb(250,250,250) 0%, rgb(225,225,225) 30%, rgb(200,200,200) 70%, rgb(175,175,175) 100%);
    transition:width 0.25s ease-in-out;
}

＆＃13;

   <nav id="navi_side">
    <ul>
     <li class="one"><a href="">A</a></li>
     <li class="two"><a href="">B</a></li>
     <li><a href="">C</a></li>
     <li><a href="">D</a></li>
     <li><a href="">E</a></li>
    </ul>
    <ul>
     <li><a href="">F</a></li>
     <li><a href="">G</a></li>
     <li><a href="">H</a></li>
    </ul>
    <ul>
     <li><a href="">I</a></li>
     <li><a href="">J</a></li>
     <li><a href="">K</a></li>
     <li><a href="">L</a></li>
    </ul>
</nav>

＆＃13;

但它全都在灰色栏上（可能是<UL>）。

如何在转换中获得阴影（box-shadow），但只能在条形图（<UL>）的下方而不是它上面。

Answer 1

在:before和:after选择器的帮助下实现了预期的效果。 :before选择器用于覆盖底部box-shadow的其余部分，而:after选择器用于操纵其width，%表示为transition用于transition目的。 width效果应用于background-color，box-shadow和all， transition-property 设置为#navi_side { /*float:left;*/ position:fixed; /*display:block;*/ margin-left:7px; } #navi_side ul { width:40px; padding:0.1px 0; background-color:#FF6600; /* modified */ border-radius:5px; } #navi_side ul:not(:last-of-type) { margin-bottom:10px; } #navi_side li { position:relative; /* added */ width:30px; height:30px; margin:5px; border-radius:5px; transition:all 1s ease-in-out; /* modified */ list-style-type:none; background-color:#00CCFF; /* added */ cursor:pointer; /* addition */ } #navi_side li:hover { width:200px; /* modified */ box-shadow:5px 6px 2.5px -2.5px Gray; /* adjust to your needs / has to be set here in order to enable its transition with the :after selector */ transition:all 0.25s ease-in-out; /* modified */ background-color:#99FF33; /* added */ } /* added */ #navi_side li:before { content:""; position:absolute; top:0; left:0; width:35px; /* the remainder of 200px + 5px right margin */ height:inherit; box-shadow:0 6px 2.5px -2.5px #FF6600; /* to cover up the remainder of the bottom box-shadow */ } #navi_side li:hover:after { content:""; position:absolute; top:0; right:0; width:85%; /* adjusting the width of the box-shadow / 85% is the same as 170px, needs to be in % not px */ height:inherit; /* ideally */ box-shadow:inherit; /* the box-shadow has to be inherited in order to enable its transition with the :after selector */ border-radius:5px; z-index:-1; } /* not necessary, at least not with this example #navi_side li:hover a { display:block; width:100%; height:30px; background:green; border-radius:5px; } #navi_side li:hover div { position:relative; z-index:-1; display:block; width:100%; height:30px; margin-top:-30px; background:red; border-radius:5px; box-shadow:5px 5px 10px black; } */：

＆＃13;

<nav id="navi_side">
  <ul>
    <li><a href="">F</a></li>
    <li><a href="">G</a></li>
    <li><a href="">F</a></li>
    <li><a href="">G</a></li>
    <li><a href="">H</a></li>
  </ul>
  <ul>
    <li><a href="">F</a></li>
    <li><a href="">G</a></li>
    <li><a href="">H</a></li>
  </ul>
  <ul>
    <li><a href="">I</a></li>
    <li><a href="">J</a></li>
    <li><a href="">K</a></li>
    <li><a href="">L</a></li>
  </ul>
</nav>

＆＃13;

transition

＆＃13;

注意：如果要应用{{1}的属性值，则可以实现:before和:after选择器的transition效果} {to}，inherit形成其父元素。

Answer 2

1）悬停时应该更宽（快）。离开时更窄（慢）。

2）阴影应该从栏后面开始。更深层次和背景层。

3）两个元素（顶部和阴影）应该同步更改。

=> "SELECT \"companies\".* FROM \"companies\" WHERE \"companies\".\"email_reminders\" IN (NULL, NULL)"

  nav#navi_side {
   float:left;
   position:fixed;
   display:block;
   margin-left:7px;
  }
   nav#navi_side ul {
    width:40px;
    padding:0.1px 0;
    background:blue;
    border-radius:5px;
   }
   nav#navi_side ul:not(:last-of-type) {
    margin-bottom:10px;
   }
    nav#navi_side li {
     position:relative;
     width:30px;
     height:30px;
     margin:5px;
     border-radius:5px;
     transition:width 1s ease-in-out;
     list-style-type:none;
    }
     nav#navi_side li:hover {
      width:150px;
      height:30px;
      margin:5px;
      border-radius:5px;
      transition:width 0.25s ease-in-out;
     }
      nav#navi_side li:hover a {
       display:block;
       width:100%;
       height:30px;
       background:green;
       border-radius:5px;
      }
      nav#navi_side li:hover div {
       position:relative;
       z-index:-1;
       display:block;
       width:100%;
       height:30px;
       margin-top:-30px;
       background:red;
       border-radius:5px;
       box-shadow:5px 5px 10px black;
      }

元素A的CSS转换由悬停元素B组成

2 个答案: