javascript - 在悬停时保留并添加新的转换(CSS/LESS)

为简单起见，我默认使用JS代码旋转div。但是然后我想添加一个:hover类，以便将鼠标悬停在其上时进行翻译。问题是，要么新转换不适用，要么旧转换不保留。

我该如何运作？顺便说一句，我正在使用LESS，所以如果LESS有解决方案，将很高兴听到。

附言该角度是根据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>

最佳答案

您无法使用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>');

请在此处检查代码笔：
http://codepen.io/anon/pen/LGzXEM

附言您可以使用动态计算的值更改旋转40deg。

关于javascript - 在悬停时保留并添加新的转换(CSS/LESS)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34836516/