如何保持鼠标悬停的状态?

我正在尝试一个过渡，其中一条线变成一个长矩形。我想这样做，当转换完成时，即使鼠标不在其上悬停，最终状态也保持在原位。

这是我当前的代码:

#line {
    width: 300px;
    height: 1px;
    background-color: darkblue;
    transition: height 2s;
    -webkit-transition: height 2s;
}
#line:hover {
    width: 300px;
    height: 200px;
    background-color: darkblue;
}

<div id="line"></div>

我认为最好的解决方案是添加一个添加类的小脚本。取消悬停后类仍然存在:

window.addEventListener('DOMContentLoaded', function() {
  document.getElementById('line').addEventListener('mouseover', function(event) {
    document.getElementById('line').classList.add('activated');
  });
});

#line {
  width: 300px;
  height: 1px;
  background-color: darkblue;
  transition: height 2s;
  -webkit-transition: height 2s;
}
#line.activated{
  width: 300px;
  height: 200px;
  background-color: darkblue;
}

<body>
  <div id="line"></div>
</body>

只有在CSS中才能获得这种效果:将元素的过渡延迟设置为一个很大的值。在悬停状态

设置为0

当你悬停的时候，元素会改变到悬停状态，这样的话，转换是立即的。

当你取消悬停时，在它开始之前会有9999秒的延迟(好吧，不是真的永远，但是没有人会注意到)

#line {
  width: 300px;
  height: 10px;
  background-color: darkblue;
  -webkit-transition: height 1s 9999s;
  transition: height 1s 9999s;
}
#line:hover{
  width: 300px;
  height: 200px;
  background-color: darkblue;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

<body>
  <div id="line"></div>
</body>

相关内容

最新更新

热门标签：