Question

我正在尝试一个线条变成长矩形的过渡。我希望这样做，以便在转换完成后，即使鼠标没有悬停在其上，最终状态仍然存在。

这是我目前的代码：

＆＃13;

var items = ['foo','bar','foobar'];
var itemImages = $( items.map(function(el){return '.'+el}).join(',') );

var objectTexts = $( items.map(function(el){return '.'+el+'-text'}).join(',') );

itemImages.click(function(){
    $( objectTexts ).hide();
    var $this = $(this);
    for(var i=0;i<items.length;i++){//loop over classes
        if($this.hasClass(items[i])){//check that clicked element has current class
            $('.'+items[i]+'-text').fadeIn('fast');
            return;
        }
    }
});

＆＃13;

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

＆＃13;

Answer 1

我认为最好的解决方案是添加一个添加类的小脚本。该课程在取消之后仍然存在：

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>

Answer 2

仅使用CSS获得此效果的一种棘手方法：将元素上的转换延迟设置为一个巨大的值。并在悬停状态下将其设置为0

当您悬停时，元素会更改为悬停状态，这样就可以立即转换。

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

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

如何在鼠标移出时保持悬停状态？

2 个答案: