为了简单起见,我有一个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;
答案 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
。