Question

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;
}

在这个小提琴中它有一个小黑框，旋转面向鼠标指针，我添加了另一个元素，显示了对象所处的当前角度，但是一旦鼠标移动到该区域，它就消失了，只有角度显示，我将如何解决这个问题？

Answer 1

您的:hover元素是.box的子元素。我注意到你已经尝试使元素自动关闭，但这是HTML中无效的语法（对于div，无论如何）。您需要使用自己的#anglereturn标记正确关闭元素。

由于该网页正在关闭无效的HTML，因此它将您的HTML表示为：

</div>

这意味着，在更改<div id="anglereturn"> <div class="box"> </div>的文本时，您实际上完全删除了box元素，因为您正在修改其父值。

您需要在#anglereturn元素中添加另一个封闭的</div>代码：

#anglereturn

元素消失了

1 个答案: