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

【问题标题】：A cleaner way of appending the same image element to all of a class?将相同的图像元素附加到所有类的更简洁的方法？
【发布时间】：2015-08-27 18:41:12
【问题描述】：

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

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

解决方案 #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>

【问题讨论】：

为什么用 jquery 让事情变得过于复杂，创建的链接的 html 输出是什么？你能提供吗？
答案是使用简单的css来实现这个效果，不需要jquer。
你查看过背景图片吗？您可以只触发新闻前面的任意元素的背景图像。
您可以使用 :after 伪元素，并将其与 :hover 结合使用，这样您就不必更改任何现有标记 - jsfiddle.net/ypj1b94h
尼克太棒了，几乎正是我所追求的。我可以修改它以完美地为我工作。如果你想作为答案，我会接受。谢谢

标签： javascript jquery html css

【解决方案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）或替代地创建您的元素一次，然后从您希望它应用到的父级中附加/删除它。在每次悬停时创建一个元素太耗时了，我猜这就是您的问题。

【讨论】：

【解决方案2】：

使用 css 使用 :hover 和 :before 和 bakground 图像。像这样的：

.something{
  display:inline-block;
  width:50px;
  height:50px;
  outline:2px solid black;
  margin:40px 20px;
  position:relative;
}
/* this one added */
.something:hover:after{
  content:"";
  width:100%;
  position:absolute;
  height:30px;
  left:0;
  bottom:100%;
}
.something:hover:before{
  position:absolute;
  left:15px;
  top:-30px;
  content:"";
  width:20px;
  height:20px;
  border-radius:50%;
  background:/* url(yourImage) */ red;
}

<div class="something">1</div>
<div class="something">2</div>
<div class="something">3</div>
<div class="something">4</div>
<div class="something">5</div>

编辑只要你有“接触”的 div 和 :before/:after 元素，它就不会消失。注意：您不需要其中 2 个，只需为您的图像使用正确的背景定位

【讨论】：

这很接近，但是如果红色圆圈在容器内移动，并且您将鼠标悬停在它上面，是否可以避免闪烁？

【解决方案3】：

检查以下代码 HTML

<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

Javascript

$(document).ready(function() {
    $(".square").mouseover(function() {
        $(".addImage").removeClass("addImage");
       $(this).addClass("addImage"); 
    });
});

CSS

.square {
    height:50px;
    width:50px;
    border:1px solid;
    margin-top:10px;
}
.addImage {
    background-image: url("myimage.png");
}

【讨论】：