Question

我正在对某段使用过渡，以便当有人将鼠标悬停在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" ;
});

Answer 1

首先，您可以仅使用考虑+选择器的CSS进行此操作。然后，您可以调整悬停状态和正常状态的过渡。在正常状态下添加等于不透明动画持续时间的延迟，并将初始状态保持在悬停状态内：

.row11 {
  width: 100%;
  height: 50vh;
  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: red;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s ease-out;
}

#html:hover + #html1 {
  opacity: 1;
  visibility: visible;
  transition: visibility 0s, opacity 2s ease-out;
}

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

Answer 2

尝试在transition上设置mouseout：

parahtml[0].style.transition = "all 2s ease-out"

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" ;
    parahtml[0].style.transition = "all 2s ease-out";
});

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

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

Answer 3

您的可见性过渡为0s，因此您需要使用hidden将鼠标不透明（过渡持续的时间）2秒钟后的可见性设置为setTimeout。

.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-in-out;
    -moz-transition: visibility 0s, opacity 2s ease-in-out;
    -o-transition: visibility 0s, opacity 2s ease-in-out;
    transition: visibility 0s, opacity 2s ease-in-out;
}

<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 for the last 12 Years</p>
</div>
<script>
var headhtml = document.getElementsByClassName("h11");
var parahtml = document.getElementsByClassName("p1");
var intvl;
headhtml[0].addEventListener('mouseover' , () => {
    if(intvl){
      clearTimeout(intvl);
      intvl = null;
    }
    parahtml[0].style.visibility = "visible" ;
    parahtml[0].style.opacity = "1" ;
});

parahtml[0].addEventListener('mouseout' , () => {
    parahtml[0].style.opacity = "0" ;
    intvl = setTimeout(function(){
      parahtml[0].style.visibility = "hidden" ;  
    }, 2000);
});
</script>

CSS Transition无法在样式更改的相反方向上工作？

3 个答案: