javascript - 将相同的图像元素附加到所有类的更简洁的方法？

Question

我有一个网页，它以正方形显示新闻文章的链接，背景图片拉伸(stretch)整个高度和宽度，底部有一个包含文本的叠加层。

我需要在将鼠标悬停在父 div 上时显示图像( View 图标)。这需要在每个新闻链接元素上发生(会有很多)。

解决方案#1

我可以使用 CSS 来实现这一点，但据我所知，我需要将图像作为 img 元素添加到需要它的每个 div 中。由于这种浪费时间的感觉，我寻找了另一种方法。

解决方案#2

使用 JavaScript 和 JQuery，我可以在将鼠标悬停在新闻链接上时创建一个 img 元素，并将其附加到新闻链接。这意味着我可以使用 css 定位它，并且只需使用 JQuery 添加类。

$('.slides .image-container').on('mouseover', function(){
  if ($('.view-symbol').length === 0) {
    var img = $(document.createElement('img')); 
    img
      .attr('src', 'images/view.png')
      .addClass('view-symbol');
    $(this).append(img);
  }
});

这应该检查图像是否已经显示。如果没有，它将创建它。

$('.slides .image-container').on('mouseout', function(){
  if ($('.view-symbol').is(':hover')) {
    $('.view-symbol').show();
  }
  $('.view-symbol').on('mouseover', function(event){
    event.preventDefault(); 
  });
  $('.view-symbol').hide(0, function(){
    $('.view-symbol').remove(); 
  });
}); 

这会在 div 上发生 mouseout 事件时隐藏它。

这个方法的问题

使用此方法，当鼠标悬停在图像本身上时，它会检测到鼠标已离开新闻链接的父 div，因此会删除该元素。删除后，鼠标再次悬停在新闻元素上，图像返回。这会产生闪烁。

问题

有没有办法修改我的代码，或者可以指出一种不同的方法来解决这个问题？

#编辑

这是链接的输出 html

<div class='small-12 medium-6 large-4 columns'>
  <div id='news-left'>
    <div class='image-container'>
      <img src='images/news1.jpg'>
        <div class='news-overlay'>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est, qui non oderit libidinosam
          </p>
        </div>
      </div>
    </div>
  </div>

Answer 1

我会有一个带有 background-image 集的 CSS 类，然后在悬停时使用 JavaScript 添加或删除该类。

或者，使用 :hover psuedo 类并将其与背景图像一起使用。

所以也许是这样的:

JQuery

$('.slides .image-container').hover( function() {
    $(this).addClass('viewImage');
}, function() {
    $(this).removeClass('viewImage');
})

CSS

.viewImage {    
    background: url('my_view_image.png');
}

或者只是

CSS

.myDiv:hover {
    background: url('my_view_image.png');
}

这两个都与您的第二个解决方案相似，这是正确的方法。

关于您描述的“闪烁”，很难准确地说出，但我想这是因为您每次都在创建 html 元素并显示它们，每次都创建一个新元素，这可能需要一些时间。

您应该创建一个带有背景图像的类并应用它(不创建 html)或者替代地创建您的元素一次并从您希望它应用到的父元素中附加/删除它。在每次悬停时创建一个元素太耗时，我猜这就是您的问题所在。