Question

我正在编写代码以将事件监听器添加到我的所有图像中，这样当悬停在上面时，会显示一个标签。图像及其附带标签都在同一个div中，因此我首先尝试选择所有图片。然后，对于每张图片，我得到其父元素的第一个子元素（图片的兄弟姐妹，标签）。然后，我将一个事件监听器附加到图片上，并在label元素中传递一个函数，该函数会更改标签的显示属性，而不是＆＃39; none＆＃39;到＆＃39;内联块＆＃39;。

我的代码不会抛出任何错误，但是当它运行时，它会记录＆＃39; el：＆＃39;之后没有任何事情。我做错了什么？

谢谢！

＆＃13;

function displayLabel(el) {
  console.log("el: " + el)
  el.style.display = 'inline block'
}

var autProPics = document.getElementsByClassName("authorprofilepic");
console.log(autProPics)

for (var i = 0; i < autProPics.length; i++) {
  var pel = autProPics[i].parentElement
  var el = pel.firstElementChild
  autProPics[i].addEventListener('mouseenter', function (){
    displayLabel(el)
})
}

＆＃13;

.authorprofilepic {
  display: block !important;
  width: 4em !important;
  margin: auto;
  margin-top: .5em;
}

body {
  background-color: rgb(221,221,221);
}

.authorprofile {
  padding-top: 1em;
  display: inline-block;
  width: 5em;
}

.authorprofilelabel {
  display: none !important;
  margin: auto !important;
  max-width: 12em !important;
}

＆＃13;

<DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/semantic-ui@2.2.13/dist/semantic.min.css" rel="stylesheet"/>
</head>
<body>
<div class="authorprofile">
<a class="ui basic label authorprofilelabel">Ben Gubler</a>
  <a href="#" class="ui image authorprofilepic inline circular">
    <img src="https://semantic-ui.com/images/wireframe/square-image.png">
  </a>
  </div>
<div class="authorprofile">
<a class="ui basic label authorprofilelabel">Ben Gubler</a>
  <a href="#" class="ui image authorprofilepic inline circular">
    <img src="https://semantic-ui.com/images/wireframe/square-image.png">
  </a>
  </div>
<div class="authorprofile">
<a class="ui basic label authorprofilelabel">Ben Gubler</a>
  <a href="#" class="ui image authorprofilepic inline circular">
    <img src="https://semantic-ui.com/images/wireframe/square-image.png">
  </a>
  </div>
<div class="authorprofile">
<a class="ui basic label authorprofilelabel">Ben Gubler</a>
  <a href="#" class="ui image authorprofilepic inline circular">
    <img src="https://semantic-ui.com/images/wireframe/square-image.png">
  </a>
  </div>
<i class="ui plus icon link huge"></i>
</body>
</html>

＆＃13;

Answer 1

我不确定，但我没看到

script标记您的html文件中的任何位置。也许你应该链接你的 **带有** html **代码的Javascript **文件，
之后根据onhover或img标记添加方法label 你的要求。

**我是新手，请原谅，如果我错了。 **

为什么addEventListener不起作用？

1 个答案: