Javascript 使用 jquery 悬停时显示文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10432481/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
display text when hovering with jquery
提问by user1104854
I'm new to jquery and attempting to display text when hovering over a div. I have a basic html page right now with a couple squares, one of which rotates when a button is clicked. Now, in this same square (div2) I'd like for some text to be displayed when hovering over this.
我是 jquery 的新手，并试图在将鼠标悬停在 div 上时显示文本。我现在有一个带有几个方块的基本 html 页面，其中一个在单击按钮时旋转。现在，在同一个方块 (div2) 中，我希望将鼠标悬停在此方块上时显示一些文本。
Here's my HTML
这是我的 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>
How do I identify that I want the text "HOVERING!!!" to be displayed over div2.
我如何确定我想要文本“HOVERING!!!” 显示在 div2 上。
Here's the CSS
这是 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;
}
And now for my .js page
现在我的 .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);
}
回答by Ranganadh Paramkusam
Use only id
仅使用 ID
$("#div2").hover(
instead of
代替
$("id=div2").hover(
回答by joelmdev
Contrary to Makkesk8's suggestion, unless you have a really good reason to do so, don't use MouseOver and MouseOut if you're using jquery. Use MouseEnter and MouseLeave instead. As explained on Ben Nadel's blog, MouseEnter and MouseLeave will make your life a little easier.
That said, you're on the right track with hover as it wraps MouseEnter and MouseLeave into one function. What you need now is two handlers in that one call. Your script should look more like this:
与 Makkesk8 的建议相反，除非您有充分的理由这样做，否则如果您使用 jquery，请不要使用 MouseOver 和 MouseOut。请改用 MouseEnter 和 MouseLeave。正如 Ben Nadel 的博客所述，MouseEnter 和 MouseLeave 将使您的生活更轻松。
也就是说，您在使用悬停时处于正确的轨道上，因为它将 MouseEnter 和 MouseLeave 包装到一个函数中。您现在需要的是在一次调用中使用两个处理程序。您的脚本应该更像这样：
<script>
$("#div2").hover(
function ()
{
$(this).html($("<span> HOVERING!!!!! </span>"));
},
function ()
{
$(this).html($(""));
});
</script>
回答by Sameh Serag
<script>
$("#div2").hover(function () {
$(this).append($("<span> HOVERING!!!!! </span>"));
});
</script>
回答by thecodeparadox
$("#div2").hover(
function () {
$(this).append($("<span> HOVERING!!!!! </span>"));
});
OR
或者
$('div[id="div2"]').hover(
function () {
$(this).append($("<span> HOVERING!!!!! </span>"));
});
回答by Gavriel
Your code (even fixed) will always append HOVERING!!! (again and again). See an example here for a version that only shows it once: http://jsfiddle.net/ggjbP/
您的代码（甚至已修复）将始终附加 HOVERING ！！！（一次又一次）。请参阅此处的示例，了解仅显示一次的版本：http: //jsfiddle.net/ggjbP/
回答by rt2800
Try this-->
试试这个-->
JSFiddle (works on chrome/FF) --> http://jsfiddle.net/rt2800/Mab6g/
JSFiddle（适用于 chrome/FF）--> 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);
})?
回答by Juan Leung
try this
尝试这个
<div id=div2><span></span></div>
<script>
$("#div2").hover(
function () {
$(this).find("span").text("HOVERING!!!!!");
},
function () {
$(this).find("span").text("");
},
);
</script>
回答by Dutchie432
The way to ask for something by id is with #
通过 id 请求东西的方式是 #
$("id=div2")
should be
应该
$("#div2")
回答by Makkesk8
You should take a look at OnMouseOver();
你应该看看 OnMouseOver();
