鼠标悬停功能获胜'不起作用

Mouseover function won't work

本文关键字：不起作用 获胜 悬停 功能 鼠标      更新时间：2023-11-03

我使用的是Raphael图形和动画，这是一个javascript库。我希望用户将鼠标悬停在底部一行、中间一列的蓝色正方形上。当他们鼠标悬停时，我希望蓝色的盒子发出黑色的光（拉斐尔函数）。我试图在rec8上使用这个函数，但我认为我做得不对。有人能纠正我的代码或帮助我吗？谢谢。：）长命百岁。

<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>
<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
    rec = r.rect(20, 20, 250, 300, 10).attr({"fill": "#fbb"});
    $("rect").mouseover(function(e) {
        $(this).attr({"fill": "red"});
        });
    $("rect").mouseout(function(e) {
        $(this).attr({"fill": "#fbb"});
    }); 
    //first column
    rec2 = r.rect(30, 80, 50, 40, 5).attr({"fill": "blue"});
    rec3 = r.rect(30, 130, 50, 40, 5).attr({"fill": "blue"});
    rec4 = r.rect(30, 180, 50, 40, 5).attr({"fill": "blue"});
    rec5 = r.rect(30, 240, 50, 40, 5).attr({"fill": "blue"});
    //second column
    rec6 = r.rect(90, 80, 50, 40, 5).attr({"fill": "blue"});
    rec2 = r.rect(90, 130, 50, 40, 5).attr({"fill": "blue"});
    rec7 = r.rect(90, 180, 50, 40, 5).attr({"fill": "blue"});
    rec8 = r.rect(90, 240, 50, 40, 5).attr({"fill": "blue"});
        $("rec8").mouseover(function(e) {
        $(this).glow({width:10});
        });
    $("rec8").mouseout(function(e) {
        $(this).glow({width:0});
    }); 
    //third column
    rec9 = r.rect(150, 80, 50, 40, 5).attr({"fill": "blue"});
    rec10 = r.rect(150, 130, 50, 40, 5).attr({"fill": "blue"});
    rec11 = r.rect(150, 180, 50, 40, 5).attr({"fill": "blue"});
    rec12 = r.rect(150, 240, 50, 40, 5).attr({"fill": "blue"});
});
</script>
</body>
</html>

此选择器：

$("rec8")

是用于任何<rec8 />标记的jQuery选择器。这些可能并不存在。您应该将鼠标事件附加到返回的拉斐尔元素：

rec8 = r.rect(90, 240, 50, 40, 5).attr({"fill": "blue"});
rec8.mouseover(function(e) {
    this.glow({width:10});
    });
rec8.mouseout(function(e) {
    this.glow({width:0});
});

但出于某种原因，当我鼠标悬停时，并没有消失

这是因为glow返回了一个表示辉光的新集合，所以您需要将其删除

注意："辉光"未连接到元素。如果更改元素属性，它将不会自行调整。

你需要跟踪Raphael作为辉光的一部分给你的返回的set，并将其移除

var rec8 = r.rect(90, 240, 50, 40, 5).attr({"fill": "blue"});
var rect8glow;
rec8.mouseover(function(e) {
    rect8glow = this.glow({width:10});
    });
rec8.mouseout(function(e) {
    rect8glow.remove();
});

你可以在这里看到一个工作演示。

查看此fiddle以获得实时解决方案：http://jsfiddle.net/zhj2r/3/
正如vcsjones所说，您将jquery和raphael组合在一起，但它们并不相关
通过$(this)，您将raphael对象包装在jquery函数调用中，这是错误的，并且$('rec4')不是有效的jquery选择器
此外，glow函数返回一组svg路径，这些路径显示目标对象的接触，因此通过调用glow({width : 0})，您不是在修改实际辉光的宽度，而是生成另一个宽度为0的辉光元素。
以下是我为使您的代码工作而修改的内容：

rec.mouseover(function(e) {
    this.attr({"fill": "red"});
});
rec.mouseout(function(e) {
    this.attr({"fill": "#fbb"});
}); 
// ...
rec8.mouseover(function(e) {
    // keep a reference to the glow object so you can remove it later
    this.theGlow = this.glow({width:10});
});
rec8.mouseout(function(e) {
    this.theGlow.remove();
});
相关文章：