我正在使用过渡效果在段落上,当鼠标悬停在h1上时缓慢地使其可见。我已经成功做到了这一点,但是过渡只有单向工作。当我的光标离开该区域时,段落突然消失了。我不希望这样,我希望它能过渡回隐藏状态。
HTML:
<div class="row11">
<h1 id="html" class="h11">HTML5</h1>
<p id="html1" class="p1"> I have strong understanding of HTML5 which makes my base strong. I have been working with HTML from the last 12 Years</p>
</div>
CSS(层叠样式表):
.row11{
width: 100%;
height: 50vh;
background: url("../images/html.jpeg") no-repeat center center fixed;
font-family: 'Julius Sans One', sans-serif;
display:flex;
align-items: center;
justify-content: center;
}
#html{
color: #fff;
padding: 10px;
background-color: #000;
width: 40%;
margin: 0 auto;
text-align: center;
margin-bottom: 5px;
}
#html1{
color: white;
background-color: rgba(182,60,56,0.9);
padding: 5%;
position: absolute;
visibility: hidden;
opacity: 0;
-webkit-transition: visibility 0s, opacity 2s ease-out;
-moz-transition: visibility 0s, opacity 2s ease-out;
-o-transition: visibility 0s, opacity 2s ease-out;
transition: visibility 0s, opacity 2s ease-out;
}
JS :
var headhtml = document.getElementsByClassName("h11");
var parahtml = document.getElementsByClassName("p1");
headhtml[0].addEventListener('mouseover' , () => {
parahtml[0].style.visibility = "visible" ;
parahtml[0].style.opacity = "1" ;
});
parahtml[0].addEventListener('mouseout' , () => {
parahtml[0].style.visibility = "hidden" ;
parahtml[0].style.opacity = "0" ;
});