元素消失了

时间:2018-03-30 23:58:57

标签: jquery html css

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

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

1 个答案:

答案 0 :(得分:0)

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

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

</div>

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

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

#anglereturn