无法将鼠标悬停事件侦听器添加到SVG元素

时间:2017-02-17 04:36:18

标签: javascript

我无法触发svg元素的事件。我在这里有以下jsfiddle:https://jsfiddle.net/r1ahq5sa/

html。

<div class="row">
  <div class="col-md-8">
    <svg class="video-nav-bar-container">
      <rect id="nav-bar" class="video-nav-bar" rx="20" ry="20"/>
    </svg>
  </div>
</div>

脚本部分。

    var navBar = document.getElementById('nav-bar');

    navBar.addEventListener('moveover', function() {
      alert('It works!');
    });

我无法将鼠标悬停事件触发并感觉像一个完整的菜鸟。任何提示将不胜感激。

2 个答案:

答案 0 :(得分:2)

事件名称错误,应该是'mouseover'。

navBar.addEventListener('mouseover', function() {
      alert('It works!');
});

答案 1 :(得分:0)

检查完小提琴后,我发现您使用moveover Jquery事件而不是Javascript。使用mouseover它会起作用。

试试这个

navBar.addEventListener('mouseover', function() {
      alert('It works!');
})