http://jsfiddle.net/ddGHz/1004/
//html
<div id = "anglereturn"/>
<div class="box"></div>
//js, jquery
var box=$(".box");
var boxCenter=[box.offset().left+box.width()/2, box.offset().top+box.height()/2];
$(document).mousemove(function(e){
var angle = Math.atan2(e.pageX- boxCenter[0],- (e.pageY- boxCenter[1]) )*(180/Math.PI);
box.css({ "-webkit-transform": 'rotate(' + angle + 'deg)'});
box.css({ '-moz-transform': 'rotate(' + angle + 'deg)'});
box.css({ 'transform': 'rotate(' + angle + 'deg)'});
$("#anglereturn").text(angle);
});
//css
.box{
background-color: black;
width: 30px;
height: 30px;
position: absolute;
left: 200px;
top: 200px;
}
在这个小提琴中它有一个小黑框,旋转面向鼠标指针,我添加了另一个元素,显示了对象所处的当前角度,但是一旦鼠标移动到该区域,它就消失了,只有角度显示,我将如何解决这个问题?
答案 0 :(得分:0)
您的:hover
元素是.box
的子元素。我注意到你已经尝试使元素自动关闭,但这是HTML中无效的语法(对于div,无论如何)。您需要使用自己的#anglereturn
标记正确关闭元素。
由于该网页正在关闭无效的HTML,因此它将您的HTML表示为:
</div>
这意味着,在更改<div id="anglereturn">
<div class="box">
</div>
的文本时,您实际上完全删除了box元素,因为您正在修改其父值。
您需要在#anglereturn
元素中添加另一个封闭的</div>
代码:
#anglereturn