Question

当我这样做时

#box {
    height: 150px;
    width: 150px;
    background-color: #cc66ff;
}

#box:active {
    width: 300px; height: 300px;
    -webkit-transition: width 1s linear, height 1s linear;
       -moz-transition: width 1s linear, height 1s linear;
        -ms-transition: width 1s linear, height 1s linear;
         -o-transition: width 1s linear, height 1s linear;
            transition: width 1s linear, height 1s linear;
}

一旦我松开鼠标按钮就丢弃了更改，有没有办法让它们留下来？扩展框并使用CSS或/和JS保持这种方式？

Answer 1

您可以使用jQuery animate function：

$("#box").click(function() {
  $(this).animate({ width: "300px", height: "300px" }, { queue: false, duration: 3000 })
});

或者作为css类的结果转换，而不是:active psuedoselector：

#box.active {
  width: 300px; height: 300px;
  -webkit-transition: width 1s linear, height 1s linear;
  -moz-transition: width 1s linear, height 1s linear;
  -ms-transition: width 1s linear, height 1s linear;
  -o-transition: width 1s linear, height 1s linear;
   transition: width 1s linear, height 1s linear;
}

$("#box").click(function() {
  $(this).addClass('active');
});

Answer 2

唯一的方法是设置动画，因为您要从一种尺寸更改为另一种尺寸，而:active定义仅适用于该“活动”状态。

我担心你无法在这个问题上使用javascript。

Answer 3

的CSS：

 #box.expanded{
 width: 300px; height: 300px;
 }

jquery（js）：

 $('#box').mouseup(function() { $(this).addClass('expanded'); });

是否可以通过CSS转换保持更改？

3 个答案: