2

私は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);
    }
4

9 に答える 9

2

IDのみを使用

$("#div2").hover(

それ以外の

$("id=div2").hover(
于 2012-05-03T13:35:09.037 に答える
2

Makkesk8の提案に反して、本当に正当な理由がない限り、jqueryを使用している場合はMouseOverとMouseOutを使用しないでください。代わりにMouseEnterとMouseLeaveを使用してください。Ben Nadelのブログで説明されているように、MouseEnterとMouseLeaveを使用すると、作業が少し楽になります。

そうは言っても、MouseEnterとMouseLeaveを1つの関数にラップするので、ホバーで正しい方向に進んでいます。今必要なのは、その1回の呼び出しで2つのハンドラーです。スクリプトは次のようになります。

<script>
    $("#div2").hover(
function ()
{
    $(this).html($("<span> HOVERING!!!!! </span>"));
},
function ()
{
    $(this).html($(""));
});
</script>
于 2012-05-03T13:52:56.857 に答える
1 
$("#div2").hover(
function () {
    $(this).append($("<span> HOVERING!!!!! </span>"));
});

また

$('div[id="div2"]').hover(
function () {
    $(this).append($("<span> HOVERING!!!!! </span>"));
});
于 2012-05-03T13:37:48.710 に答える
1

あなたのコード（修正されていても）は常にH​​OVERINGを追加します!!! （何回も何回も）。一度だけ表示されるバージョンについては、こちらの例を参照してください：http: //jsfiddle.net/ggjbP/

于 2012-05-03T13:38:15.920 に答える
1 
<script>
    $("#div2").hover(function () {
        $(this).append($("<span> HOVERING!!!!! </span>"));
    });
</script>
于 2012-05-03T13:36:09.210 に答える
1

これを試して

<div id=div2><span></span></div>
<script>
    $("#div2").hover(
        function () {
            $(this).find("span").text("HOVERING!!!!!");
        },
        function () { 
            $(this).find("span").text("");
        },
    );  
</script>
于 2012-05-03T13:44:59.253 に答える
1

これを試してください-->

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);
                  })​
于 2012-05-03T13:39:36.447 に答える
0

OnMouseOver（）;を確認する必要があります。

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

于 2012-05-03T13:34:02.373 に答える
0

IDで何かを求める方法は# 

$("id=div2")

する必要があります

$("#div2")

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

于 2012-05-03T13:32:36.903 に答える