Question

让我们尝试更简单的事情。我有一个粉红色的盒子，当用户将鼠标悬停时，我希望它从粉红色变为红色。此功能无效。任何人都可以帮我修复代码或找到错误??他们告诉我，如果我不能正常工作，我将被释放!!

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

Answer 1

为什么你要用css来实现这个

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

或者，请改用此代码

$(rect).mouseover(function() {
    this.attr({"background-color": "red"});
});

Answer 2

尝试将$("rect")更改为rect

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

然而，有人在评论中指出它可能不适用于SVG。

如果您将rect作为具有高度和宽度的div，使用left和top固定位置以及背景颜色，您只需在鼠标悬停时更改背景颜色的css值。

对于div示例：

假设您有一个id="pinkBox"

的div

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

你也需要定位div，我不确定拉斐尔的东西是如何工作的，从不亲自看过它，但如果它的固定位置那么你可以用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保存在单独的文件中或文档的头部。

Answer 3

我改变了一下，但是这样的事情：

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/

鼠标悬停功能无效

3 个答案: