在悬停时保留和添加新变换(CSS / LESS)

时间:2016-01-17 08:33:23

标签: javascript css css3 transform

为了简单起见,我有一个div,我默认使用JS代码进行旋转。但后来我想添加一个:hover类,以便在将鼠标悬停在它上面时进行转换。问题是,新的转换不适用,或旧的不保留。

我怎样才能让它发挥作用?顺便说一下,我使用LESS,所以如果有LESS的解决方案,很高兴听到它。

P.S。根据JS中兄弟姐妹的数量生成角度。也许我可以用LESS进行轮换,然后在那里做:hover



document.getElementById("box").style.transform = "rotate(" + 40 + "deg)";

#box {
  width: 50px;
  height: 50px;
  background-color: red;
  transition: all 0.5s ease-in;
}
#box:hover {
  background-color: blue;
  transform: translate(50px) !important;
}

<div id="box">

</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:-1)

使用CSS / LESS无法达到预期效果。您必须使用JavaScript来生成动态样式。类似于下面的脚本可以完成任务:

var dynamic_styles = '';
var counter = 1;
$('.box').each(function() {
  $(this).attr('data-num', counter);
  dynamic_styles += '.box[data-num="' + counter + '"] {transform: rotate(40deg);}';
  dynamic_styles += '.box[data-num="' + counter + '"]:hover {transform: rotate(40deg) translate(50px);}';
  counter++;
});

$('head').append('<style>' + dynamic_styles + '</style>');

请在此处查看codepen: http://codepen.io/anon/pen/LGzXEM

P.S。您可以使用动态计算的值更改轮换40deg