出现Javascript悬停功能

Javascript hover function to appear

本文关键字：功能 悬停 Javascript 出现      更新时间：2023-09-26

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

淘汰赛 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

也就是说，你应该调用函数（例如，匿名）并将你的 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/

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

这是使用拉斐尔添加文本的另一个很好的答案。

现场示例：http://codepen.io/larryjoelane/pen/LGKxeR

Raphael/JavaScript Code： 

     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"
    });
  }
};
相关文章：