【问题标题】:jquery mouse events not working on anchor tagjquery鼠标事件不适用于锚标记
【发布时间】:2013-07-08 04:44:13
【问题描述】:

我有一个锚标记并悬停在其中,我希望我的 div 能够显示并且应该在鼠标移出时隐藏。只是一个典型的 jquery 鼠标事件。

但是,这似乎不起作用。有人可以帮我解决这个问题。检查小提琴http://jsfiddle.net/SLLeL/

$(".contributor").on({

mouseover: function(e) {

populateContributorsInArray(this);
var mousex = e.pageX - LEFT; // Get X coordinates
var mousey = e.pageY - TOP; // Get Y coordinates
$('#myDiv').css({
    top : mousey,
    right : mousex
});

var ul_data = "";
for ( var i = 0; i < CONTRIBUTORS.length; i++) {
    ul_data = ul_data + "<li>" + CONTRIBUTORS[i] + "</li>";
}
$("#myDiv ul").html(ul_data);
$("#myDiv").stop().hide().slideToggle('fast');
$("#arrow-left").stop().hide().slideToggle('fast');

},

mouseout: function(){
    alert("hi");
//Basically hide the div
//      $("#contributors_div").stop().hide().slideToggle('fast');
//      $("#arrow-left").stop().hide().slideToggle('fast');
}
});

还有 HTML

<div id="myDiv">
    <div id="arrow-left"></div>
    <ul></ul>
</div>

<a class="contributor" href="#">Hover Me</a>

【问题讨论】:

  • populateContributorsInArray 函数在哪里......你的 jsfiddle 中缺少这个函数
  • var CONTRIBUTORS = {"abc", "def"} 中的错误;在 jsfiddle 悬停事件中正常工作将其更改为 var CONTRIBUTORS = ["abc", "def"];
  • populateContributorsInArray 基本上是一个函数,它通过读取 JSON 来填充 CONTRIBUTORS 数组,然后我遍历数组以将贡献者放入要显示的 div 内的 ul 标记中。
  • CONTRIBUTORS 数组通过拆分逗号分隔的字符串来填充。 CONTRIBUTORS = list.split(","); 类似这样的东西。

标签: javascript jquery mouseover onmouseover


【解决方案1】:

您创建了一个对象而不是数组。所以您遇到的错误是Unexpected token , 检查您的控制台...

改变

var CONTRIBUTORS = {"abc", "def"};

到数组

var CONTRIBUTORS = ["abc", "def"];

它应该可以工作..虽然你的小提琴缺少在 mouseover 方法中调用的 populateContributorsInArray 函数..

fiddle here

【讨论】:

  • 正如我上面所说的,populateContributorsInArray 基本上是一个函数,它通过读取 JSON 来填充 CONTRIBUTORS 数组,然后我循环遍历数组以将贡献者放入 div 内的 ul 标记中将被显示。
  • CONTRIBUTORS 数组通过拆分逗号分隔的字符串来填充。 CONTRIBUTORS = list.split(","); 类似这样的东西。
  • 是的。我无法显示 div。实际上,我希望这个 div 显示为工具提示,但无法这样做。
猜你喜欢
  • 2021-05-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-04-18
  • 2022-11-26
相关资源
最近更新 更多