悬停元素 B 对元素 A 的 CSS 过渡答案

【问题标题】：CSS transition for element A by hover element B悬停元素 B 对元素 A 的 CSS 过渡
【发布时间】：2017-12-12 17:46:17
【问题描述】：

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

通过悬停按钮，按钮应向右缓出（用于标题文本）。

我通过“transition: with”做到了这一点

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

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

但这一切都在一个灰色条上（可能是<UL>）。

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

【问题讨论】：

不清楚你在问什么。您所说的“只在酒吧的下方而不是在酒吧”是什么意思？
我又试了一次。 ;)
对不起，你又试了什么？

标签： css z-index transition shorthand box-shadow

【解决方案1】：

在:before 和:after 选择器的帮助下达到了预期的效果。 :before 选择器用于覆盖底部box-shadow 的其余部分，而:after 选择器用于操作其width，在% 中表示为transition 目的。 transition 效果应用于width、background-color 和box-shadow，transition-property 设置为all：

#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;
}
*/

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

注意：如果您要应用transition 的属性值为inherit，则可以使用:before 和:after 选择器实现transition 效果ed 形成它们的父元素。

【讨论】：

我是代码盲。 ;）谢谢！我尝试创建 3 层并为最后一层设置阴影（覆盖侧边栏）。我的问题是同步。向后移动。：/但你的想法很好！在侧边栏上剪下一个较小的阴影，就这么简单。 ;) 对不起，非常感谢！！

【解决方案2】：

1) 悬停时它应该更宽（快速）。并且更窄（慢），同时离开。

2) 阴影应该从条的后面开始。在背景中更深的一层。

3) 两个元素（顶部和阴影）应该同步变化。

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

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

【讨论】：