我是 jquery 的新手,并试图在将鼠标悬停在 div 上时显示文本。我现在有一个带有几个正方形的基本 html 页面,其中一个在单击按钮时会旋转。现在,在同一个正方形 (div2) 中,我希望在将鼠标悬停在它上面时显示一些文本。
这是我的 HTML
<!DOCTYPE html>
<html>
<head>
<LINK href="divtest.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src=divtest.js></script>
</head>
<body>
<div id="border">
<div id="div1">
<div id="div2">
</div>
</div>
</div>
<input type="button" value="button" onclick="rotate()" />
<script>
$("id=div2").hover(
function () {
$(this).append($("<span> HOVERING!!!!! </span>"));
});
</script>
</body>
</html>
我如何确定我想要文本“HOVERING!!!” 显示在 div2 上。
这是CSS
#border{
position:relative;
border-style:solid;
border-width:5px;
border-color:black;
width:1366;
height:768
}
#div1{
position:relative;
background-color: blue;
display:block;
height:500px;
width:500px;
left:350px;
}
#div2{
position:relative;
background-color: green;
display:block;
height:400px;
width:400px;
top:50px;
left:50px;
}
现在对于我的 .js 页面
var obj = "div2";
var angle = 0;
var interval = 100;
increment = 5;
function rotate() {
$('#' + obj).css({
'-moz-transform': 'rotate(' + angle + 'deg)',
'msTransform': 'rotate(' + angle + 'deg)',
'-webkit-transform': 'rotate(' + angle + 'deg)',
'-o-transform': 'rotate(' + angle + 'deg)'
});
angle += increment;
setTimeout(rotate, interval);
}