Question

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

<div id="box">

</div>

＆＃13;

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

在悬停时保留和添加新变换（CSS / LESS）

1 个答案: