-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")为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 示例：

假设你有一个 divid="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 回答