我是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);
}
答案 0 :(得分:2)
仅使用ID
$("#div2").hover(
而不是
$("id=div2").hover(
答案 1 :(得分:2)
与Makkesk8的建议相反,除非你有充分的理由这样做,否则如果你使用的是jquery,请不要使用MouseOver和MouseOut。请改用MouseEnter和MouseLeave。 As explained on Ben Nadel's blog,MouseEnter和MouseLeave将让您的生活更轻松。
那就是说,当你将MouseEnter和MouseLeave包装成一个函数时,你会在悬停的正确轨道上。你现在需要的是一个电话中的两个处理程序。你的脚本看起来应该更像这样:
<script>
$("#div2").hover(
function ()
{
$(this).html($("<span> HOVERING!!!!! </span>"));
},
function ()
{
$(this).html($(""));
});
</script>
答案 2 :(得分:1)
<script>
$("#div2").hover(function () {
$(this).append($("<span> HOVERING!!!!! </span>"));
});
</script>
答案 3 :(得分:1)
$("#div2").hover(
function () {
$(this).append($("<span> HOVERING!!!!! </span>"));
});
或强>
$('div[id="div2"]').hover(
function () {
$(this).append($("<span> HOVERING!!!!! </span>"));
});
答案 4 :(得分:1)
您的代码(甚至已修复)将始终附加HOVERING! (一次又一次)。 请参阅此处的示例,查看仅显示一次的版本:http://jsfiddle.net/ggjbP/
答案 5 :(得分:1)
试试这个 - &gt;
JSFiddle(适用于chrome / FF) - &gt; http://jsfiddle.net/rt2800/Mab6g/
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);
}
$(document).ready(function(){
$("#div2").hover(
function () {
$(this).append($("<span> HOVERING!!!!! </span>"));
});
$('#btnRotate').on('click', rotate);
})
答案 6 :(得分:1)
试试这个
<div id=div2><span></span></div>
<script>
$("#div2").hover(
function () {
$(this).find("span").text("HOVERING!!!!!");
},
function () {
$(this).find("span").text("");
},
);
</script>
答案 7 :(得分:0)
答案 8 :(得分:0)
你应该看看OnMouseOver();