我正在尝试创建一种悬停效果,我的白框会向右滑动,而我的文本会滑回屏幕。
您可以从下面的视频中看到,如果我将鼠标悬停在框的中间,它会起作用,但是因为我使用的是负 right
属性,所以如果我将鼠标悬停在它的左侧,它就会出现故障边。有谁知道我可以做些什么来让它顺利工作?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: pink;
}
nav {
position: fixed;
top: 0;
right: 0;
border: 1px solid red;
height: 200px;
width: 120px;
}
nav a {
background-color: #fff;
float: right;
padding: 10px;
display: block;
width: 100%;
margin-bottom: 10px;
transition: all .4s;
text-decoration: none;
color: black;
font-weight: bold;
}
nav a:hover {
color: yellow;
margin-right: 10px;
border-box: content-box;
background-color: transparent;
}
.box,
.navlink {
position: fixed;
background-color: #fff;
width: 110px;
height: 35px;
right: 0;
transition: all .4s;
}
.navlink {
right: -110px;
font-size: 24px;
padding-top: 5px;
font-weight: bold;
color: gold;
background-color: transparent;
}
.box:hover {
right: -110px;
}
.box:hover .navlink {
right: 0;
}
.one {
top: 0;
}
.two {
top: 45px;
}
.three {
top: 90px;
}
<div class="box one">
<div class="navlink one">Home</div>
</div>
<div class="box two">
<div class="navlink two">Pizza</div>
</div>
<div class="box three">
<div class="navlink three">Plaything</div>
</div>
最佳答案
我要做的是在框内使用绝对位置的背景 div。
这是我的建议:http://codepen.io/r3npi2/pen/JKNYmd
HTML:
<div class="box one">
<div class="bg"></div>
<div class="navlink one">Home</div>
</div>
<div class="box two">
<div class="bg"></div>
<div class="navlink two">Pizza</div>
</div>
<div class="box three">
<div class="bg"></div>
<div class="navlink three">Plaything</div>
</div>
CSS:
body {
background-color: pink;
}
.box {
position: fixed;
width: 110px;
height: 35px;
right: 0;
}
.box .bg {
position: absolute;
background-color: #fff;
width: 100%;
height:100%;
right: 0;
top:0;
transition: all .4s;
}
.navlink {
position: absolute;
right: -110px;
font-size:24px;
font-weight:bold;
color:gold;
background-color: transparent;
width: 100%;
height:100%;
top:0;
transition: all .4s;
padding-top:5px;
box-sizing: border-box;
}
.box:hover .bg {
right:-110px;
}
.box:hover .navlink {
right: 0;
}
.box.one {
top: 0;
}
.box.two {
top: 45px;
}
.box.three {
top: 90px;
}
关于html - 在元素滑入时将元素滑出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38116040/