CSS 悬停元素 B 对元素 A 的过渡
CSS transition for element A by hover element B
我有一个带有按钮的垂直边栏。
通过将鼠标悬停在按钮上,该按钮应该向右移动(对于标题文本)。
我是通过 "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>
) 而不是柱线上方。
在 :before
和 :after
选择器的帮助下实现了预期的效果。 :before
选择器用于遮盖底部剩余的box-shadow
,而:after
选择器用于操作其width
,表示为%
] 用于 transition
目的。 transition
效果应用于 width
、background-color
和 box-shadow
,transition-属性 设置为 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>
注意: :before
和 :after
选择器的 transition
效果可以实现,如果你想要的属性值将 transition
应用于 inherit
形成其父元素。
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>
我有一个带有按钮的垂直边栏。
通过将鼠标悬停在按钮上,该按钮应该向右移动(对于标题文本)。
我是通过 "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>
) 而不是柱线上方。
在 :before
和 :after
选择器的帮助下实现了预期的效果。 :before
选择器用于遮盖底部剩余的box-shadow
,而:after
选择器用于操作其width
,表示为%
] 用于 transition
目的。 transition
效果应用于 width
、background-color
和 box-shadow
,transition-属性 设置为 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>
注意: :before
和 :after
选择器的 transition
效果可以实现,如果你想要的属性值将 transition
应用于 inherit
形成其父元素。
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>