Question

当您将鼠标悬停在图片上时，我使用javascript代码创建弹出框，但它仅适用于一个图片，因为我相信它使用的是ID而不是类，但不确定。看看我写的代码：

的Javascript

var e = document.getElementById('parent');
e.onmouseover = function() {
  document.getElementById('popup').style.display = 'inline';
}
e.onmouseout = function() {
  document.getElementById('popup').style.display = 'none';
}

HTML

<img id="parent" src="img/Fruits.png" alt=Fruit">
                    <div id="popup">
                        <h5>
                            Apple:
                        </h5>
                        <h5 class="fruitDescription">
                            Apples taste good
                        </h5>
                    </div>

CSS

#popup {
display: none;
position: absolute;
background: #000;
opacity: 0.85;
border-radius: 5px;
width: 500px;
height: 382px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
margin-top: -105px;
margin-left: 40px;
color: #1E90FF;
}

#popup:before{
content: "";
position: absolute;
top: 60px;
left: -25px;
z-index: 1;
border: solid 15px transparent;
border-right-color: black;
color: #1E90FF;
}

我认为它不起作用，因为我使用的是ID。我想弄清楚的是如何为多个图像做同样的事情。

感谢。

Answer 1

跳过javascript，将一个类添加到img / popup，一个包装器并按照这样做

＆＃13;

.wrap {
  position: relative;
}
.popup {
  display: none;
  position: absolute;
  background: #000;
  opacity: 0.85;
  border-radius: 5px;
  width: 500px;
  height: 382px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  margin-top: -105px;
  margin-left: 40px;
  color: #1E90FF;
  z-index: 1;
}
.popup:before{
  content: "";
  position: absolute;
  top: 60px;
  left: -25px;
  z-index: 2;
  border: solid 15px transparent;
  border-right-color: black;
  color: #1E90FF;
  pointer-events: none;
}
.pic {
  z-index: 0;
}
.pic:hover + .popup {
  display: block;
}

＆＃13;

<div class="wrap">
  <img class="pic" src="http://lorempixel.com/50/50/nature/1/" alt="Fruit">
  <div class="popup">
    <h5>
      Apple:
    </h5>
    <h5 class="fruitDescription">
      Apples taste good
    </h5>
  </div>
</div>

<div class="wrap">
  <img class="pic" src="http://lorempixel.com/50/50/nature/2/" alt="Fruit">
  <div class="popup">
    <h5>
      Lemon:
    </h5>
    <h5 class="fruitDescription">
      Lemon is sour
    </h5>
  </div>
</div>

＆＃13;

Answer 2

假设您为所有图片使用相同的ID，那就是问题所在。您的ID必须在文档中是唯一的（因此您是整个页面）; getElementById只返回一个匹配项，因为它假定您遵循标准。如果要将onclick事件分配给多个元素，则需要切换到使用类。

Answer 3

如果您可以使用jQuery，那么在将ID更改为类后，它将处理多个图像。

$('.parent').on('mouseover', function(){
    $(this).next('.popup').css('display', 'inline');
});

$('.parent').on('mouseout', function(){
    $(this).next('.popup').css('display', 'none');
});

示例：https://jsfiddle.net/dfurg918/

Answer 4

这是一个仅限js的解决方案：

＆＃13;

Array.prototype.forEach.call(document.querySelectorAll(".imgContainer"), function(e) {
  e.onmouseover = function() {
    e.querySelector('.popup').style.display = 'inline';
  };
  e.onmouseout = function() {
    e.querySelector('.popup').style.display = 'none';
  };

});

＆＃13;

.imgContainer .popup {
  display: none;
  position: absolute;
  background: #000;
  opacity: 0.85;
  border-radius: 5px;
  width: 500px;
  height: 382px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  margin-top: -105px;
  margin-left: 40px;
  color: #1E90FF;
}
.imgContainer .popup:before {
  content: "";
  position: absolute;
  top: 60px;
  left: -25px;
  z-index: 1;
  border: solid 15px transparent;
  border-right-color: black;
  color: #1E90FF;
}

＆＃13;

<div class="imgContainer">
  <img id="parent" src="img/Fruits.png" alt=Fruit ">
                                                
    <div class="popup " id="popup ">
        <h5>
            Apple:
        </h5>
        <h5 class="fruitDescription ">
            Apples taste good
        </h5>
    </div>
</div>                              
 <div class="imgContainer "> 
<img id="parent2 " src="img/Fruits.png " alt=Fruit">

  <div class="popup" id="popup2">
    <h5>
            Apple:
        </h5>
    <h5 class="fruitDescription">
            Apples taste good
        </h5>
  </div>
</div>

＆＃13;

Answer 5

正如其他人所指出的那样，id应该为您要访问的每个元素保留一个唯一值。另一方面，name对于您的所有图片可能相同，然后您可以使用document.getElementsByName()

注意：＆＃39;，元素 s ByName

返回找到的元素数组。或者，document.querySelector()和document.querySelectorAll()可以分别用于返回符合特定选择器的单个元素或元素数组。该选择器可以基于元素类型，类，名称，特定属性的存在，特定属性的值，并且列表继续。同样地，因为我确定其他人在我在这里完成时已经发布了，jQuery，语法与本地querySelector[All]()略有不同，可以很容易地用于选择jQuery对象的数组包装实际的DOM元素。

使用上述方法之一，您可以选择并附加到返回的每个元素的mouseover和mouseout事件。

这只是一个如何将它组合在一起的例子......

将id='parent'更改为name='parent'。
选择属性为name='parent'的所有元素。
将事件附加到集合中的每个元素。

＆＃13;

(function() {
  var parents = document.querySelectorAll('img[name="parent"]');

  function alertMe() {
    alert('click is bound');
  }

  for (var i = 0; i < parents.length; i++) {
    parents[i].onclick = alertMe;
  }
})();

＆＃13;

<img name="parent" src="img/Fruits.png" alt="Fruit&quot;">
<div id="popup">
  <h5>
                            Apple:
                        </h5>
  <h5 class="fruitDescription">
                            Apples taste good
                        </h5>
</div>
<img name="parent" src="img/Fruits.png" alt="Fruit&quot;">
<div id="popup">
  <h5>
                            Banana:
                        </h5>
  <h5 class="fruitDescription">
                            Bananas taste better
                        </h5>
</div>

＆＃13;

将鼠标悬停在图片上以使用JavaScript显示文本框仅适用于一张图片，因为我使用的是getElementById

5 个答案: