-1

もっと簡単なことを試してみましょう。ピンクのボックスがあり、ユーザーがそれをマウスオーバーするとピンクから赤に変わりたいです。この機能は動作していません。誰かが私がコードを修正したりエラーを見つけたりするのを手伝ってもらえますか？彼らは私がこれを働かせることができないならば私が手放されるつもりであると私に言いました！

<html>
<head><title></title>
<script src="raphael-min.js"></script>
<script src="jquery-1.7.2.js"></script>

<style type="text/css"> 
#input
{
margin-top:-200px;

}
</style>

</head>

<body style="background-color:black";>



<div id="draw-here-raphael" style="height: 400px; width: 400px; background: #666; z-index:0;">
</div>

<div id="input" style="z-index:99;" >
  <input type="text" value="0"; style="text-align:right;" /><br />
</form> 
  </div>

<script type="text/javascript">
//all your javascript goes here
$(function() {
var r = new Raphael("draw-here-raphael"),

    // Store where the box is
    position = 'left',

    // Make our pink rectangle
    rect = r.rect(20, 20, 250, 300, 10).attr({"fill": "#fbb"});
    $("rect").(function(i) {
        $("rect").mouseover(function() {
            $("rect").attr({"fill": "red"});
        });
    }); 
});

</script>

</body>
</html>
4

3 に答える 3

1

なぜこれに css を使わないのか

#draw-here-raphael:hover{background-color:Red;}

または、代わりにこのコードを使用してください

$(rect).mouseover(function() {
    this.attr({"background-color": "red"});
});
于 2012-07-16T13:57:14.630 に答える
0

$("rect")を just に変更してみてくださいrect

rect = r.rect(20, 20, 250, 300, 10).attr({"fill": "#fbb"});
rect.(function(i) {
    rect.mouseover(function() {
        rect.attr({"fill": "red"});
    });
});

ただし、誰かがコメントで指摘したように、SVG では機能しない可能性があります。

高さと幅を持つ div として四角形を持っている場合、左と上で固定位置と背景色を指定すると、マウスオーバー時に背景色の css 値を変更できます。

div の例:

divがあるとしますid="pinkBox"

$('#pinkBox').mouseover(function() {
    $(this).css('background-color','#ff0000');
});

divも配置する必要があります.Raphaelがどのように機能するかはわかりませんが、個人的に見たことはありませんが、配置が固定されている場合は、cssでこれをエミュレートできますposition:fixed; top: some value; left: some value; width: some value; height: some value

完全なコード:

HTML:

<div id="pinkBox" style="position:fixed; left:20, top:20; width:250; height:300" ></div>

Javascript:

$(document).ready(function() {
    $('#pinkBox').mouseover(function() {
        $(this).css('background-color','#ff0000');
    });
});

残念ながら、CSS3 を使用していない場合、画像を使用しない限り角を丸くすることはできません。CSS3 を使用しますが、次のスタイルを div に追加することで角を丸くすることができます

border-radius: 10px; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px;

簡単にするために、スタイルを div にインラインで追加しました。ただし、クラスを作成し、class 属性を使用して、css を別のファイルまたはドキュメントの先頭に保持することをお勧めします。

于 2012-07-16T13:52:40.797 に答える
0

ちょっと変えてみましたが、こんな感じでしょうか。

var canvas = Raphael(document.getElementById("draw-here-raphael"));

// Make rectangle pink
var r = canvas.rect(20, 20, 250, 300, 10).attr("fill", "#fbb");

$("#draw-here-raphael").mouseover(function() {
    r.attr("fill", "red");
});

http://jsfiddle.net/7PLy9/

于 2012-07-16T14:21:48.547 に答える