【问题标题】：Javascript hover function to appearJavascript悬停功能出现
【发布时间】：2016-02-21 15:22:18
【问题描述】：

我知道当你将鼠标悬停在一个圆圈上时如何让一个框出现，但它太大了，我认为它会破坏体验。这是一个警报。如果你明白我的意思，我更喜欢它，因为它是一个较小的盒子，当你悬停时它只会出现在圆圈上，而不是一个巨大的盒子。但是我不确定如何实现这一点。任何帮助都会很棒

淘汰赛 JS 2.0.0

window.onload = function() {
  var paper = new Raphael(0, 0, 400, 400);
  var backGround = paper.rect(0, 0, 400, 400);
  backGround.attr({
    fill: "orange"
  });
  var face = paper.circle(200, 200, 100);
  face.attr({
    fill: "Red"
  });
  face.hover(hoverHandler);
};

function hoverHandler() {
  alert("hi");
}

所以当用户将鼠标悬停在红色圆圈上时，我想要一个小框出现在它上面并打个招呼

谢谢

编辑：JSFiddle

【问题讨论】：

html/css在哪里？
Raphael 函数的代码在哪里？到目前为止，您使用哪些库来实现您所拥有的？
@Nevershow2016 Knockout JS 2.0 Library 标题背后的含义是什么？

标签： javascript jquery html css hover

【解决方案1】：

这就是你想要的，你应该调用函数（例如，匿名）并将你的 bar 传递给它来修改它的属性。然后，在鼠标 hover 上，该条出现在圆圈上方。

window.onload = function() {
  var paper = new Raphael(0, 0, 400, 400);
  var face = paper.circle(200, 200, 100);
  face.attr({
    fill: "Red"
  });
  var backGround = paper.rect(150, 150, 100, 100);
  backGround.attr({
    fill: "",
    "stroke-width": 0
  });
  face.hover(function(){hoverHandler(backGround)});
};

function hoverHandler(l) {
  alert("hi");
  l.attr({
    fill: "orange"
  });
}

http://jsfiddle.net/fkL0ug3h/

【讨论】：

【解决方案2】：

您可能不得不摆弄想要放置元素的位置，但这应该会让您朝着正确的方向前进。您可能面临的主要问题是您的回调在加载函数调用之外，因此如果您尝试将纸质对象传递给您的回调函数，它将返回 undefined。

这是另一个很好的 answer 使用 Raphael 添加文本。

实时示例：http://codepen.io/larryjoelane/pen/LGKxeR

Raphael/JavaScript 代码：

     window.onload = function() {

  var paper = new Raphael(0, 0, 400, 400);

  var backGround = paper.rect(0, 0, 400, 400);

  backGround.attr({
    fill: "orange"
  });
  var face = paper.circle(200, 200, 100);
  face.attr({
    fill: "Red"
  });

  face.hover(hoverHandler);


  //Moved this inside of the onload event
  function hoverHandler() {

    //create the alert
    var alert = paper.rect(175, 175, 50, 50);

    alert.attr({

      fill: "blue"

    });

    //add the text

    var text = paper.text(200, 200, "Hi!");

    //add some attributes
    text.attr({
      "font-size": 22,
      "font-family": "Arial, Helvetica, sans-serif"
    });

  }

};

【讨论】：