使用 jQuery 悬停时显示文本

display text when hovering with jquery

本文关键字：显示 文本 悬停 jQuery 使用      更新时间：2023-09-26

我是jquery的新手，并尝试在将鼠标悬停在div上时显示文本。我现在有一个基本的 html 页面，上面有几个方块，其中一个在单击按钮时旋转。现在，在同一个方块（div2）中，我希望将鼠标悬停在此上方时显示一些文本。

这是我的网页

<!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>

如何确定我希望文本"悬停!!"显示在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);
    }

仅使用 id

$("#div2").hover(

而不是 

$("id=div2").hover(

与 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>

$("#div2").hover(
function () {
    $(this).append($("<span> HOVERING!!!!! </span>"));
});

或

$('div[id="div2"]').hover(
function () {
    $(this).append($("<span> HOVERING!!!!! </span>"));
});

<script>
    $("#div2").hover(function () {
        $(this).append($("<span> HOVERING!!!!! </span>"));
    });
</script>

您的代码（即使是固定的）将始终附加到悬停!!（一次又一次）。请参阅此处的示例，了解仅显示一次的版本：http://jsfiddle.net/ggjbP/<</p>

div class="answers">

试试这个

<div id=div2><span></span></div>
<script>
    $("#div2").hover(
        function () {
            $(this).find("span").text("HOVERING!!!!!");
        },
        function () { 
            $(this).find("span").text("");
        },
    );  
</script>

试试这个-->

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

通过 id 请求某些东西的方法就是使用 # 

$("id=div2")

应该是 

$("#div2")

http://jsfiddle.net/9qU4Z/1/

你应该看看 OnMouseOver（）;

http://www.w3schools.com/jsref/event_onmouseover.asp

相关文章：