**我希望按钮容器在悬停结束后隐藏,当悬停和覆盖出现时,我希望按钮容器可见,当悬停结束时我希望将其隐藏,所以我尝试了可见性:可见但不起作用,我也尝试过(显示:无和显示:块),它也无法正常工作!
.container{
width:300px;
height: 300px;
background-color: red;
position: relative;
margin: auto;
}
img{
display: block;
width: 100%;
height: 100%;
/* position: absolute;
right:0;
top:0px; */
}
.overlay{
background-color: grey;
opacity: 0.5;
width: 3%;
height: 100%;
position: absolute;
top:0;
right: 0;
/* left:100%; */
transition: width 0.6s ease-out;
}
.container:hover .overlay{
width: 100%;
/* left:0% */
}
.overlay a{
color: white;
display: block;
text-decoration: none;
border-bottom: 5px;
margin-top: 9px;
}
#button-container{
visibility: hidden;
width: 120px;
height: 30px;
position: relative;
background-color: black;
color: white;
margin:70px auto;
text-align: center;
line-height: 2em;
}
#button-overlay{
width:10px;
height: 100%;
background-color: white;
position: absolute;
right: 0;
top:0;
transition: width 0.4s;
}
#button-container:hover #button-overlay{
width: 100%;
}
#button-container:hover #button-container{
visibility: visible;}
#button-container:hover #learn-more{
color: black;
}
<body>
<div class ="container">
<img src="3.jpeg" alt="">
<div class="overlay">
<a href="#" class="social">facebook</a>
<a href="#" class="social">twitter</a>
<a href="#" class="social">instagram</a>
<div id="button-container">
<a id="learn-more" >learn more</a>
<div id="button-overlay"></div>
</div>
</div>
</div>
</body>
尝试将您的按钮容器从0缩放到1,并具有转换延迟。
.container{
width:300px;
height: 300px;
background-color: red;
position: relative;
margin: auto;
}
img{
display: block;
width: 100%;
height: 100%;
/* position: absolute;
right:0;
top:0px; */
}
.overlay{
background-color: grey;
opacity: 0.5;
width: 3%;
height: 100%;
position: absolute;
top:0;
right: 0;
/* left:100%; */
transition: width 0.6s ease-out;
}
.container:hover .overlay{
width: 100%;
/* left:0% */
}
.overlay a{
color: white;
display: block;
text-decoration: none;
border-bottom: 5px;
margin-top: 9px;
}
.container:hover #button-container{
transform: scale(1);
}
#button-container{
width: 120px;
transform: scale(0);
height: 30px;
position: relative;
background-color: black;
color: white;
margin:70px auto;
text-align: center;
line-height: 2em;
transform-origin: left top;
trnasition: all 250ms ease-in-out;
transition-delay: 250ms;
}
#button-overlay{
width:10px;
height: 100%;
background-color: white;
position: absolute;
right: 0;
top:0;
transition: width 0.4s;
}
#button-container:hover #button-overlay{
width: 100%;
}
#button-container:hover #button-container{
visibility: visible;}
#button-container:hover #learn-more{
color: black;
}
<body>
<div class ="container">
<img src="3.jpeg" alt="">
<div class="overlay">
<a href="#" class="social">facebook</a>
<a href="#" class="social">twitter</a>
<a href="#" class="social">instagram</a>
<div id="button-container">
<a id="learn-more" >learn more</a>
<div id="button-overlay"></div>
</div>
</div>
</div>
</body>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句