如何在悬停时将不同的背景图像添加到不同的div元素？

Question

我有几个div元素在网格中对齐。 我希望它们在用户将鼠标悬停在其上时具有特定的不同背景图像，而当鼠标离开div时它们会消失。 基本上，这是一个用户信息页面，其中每个方格都有用户数据。 当人们将鼠标悬停在正方形上时，用户的图像将显示为背景图像。 这是HTML：

<div class="contributor">
  Some great stuff here
</div>

这是我当前正在使用的jQuery代码。 问题：它将相同的图像分配给每个div，而我希望每个div具有不同的图像。

$(document).ready(function(){
  $('.contributor').mouseenter(function(){
      $(this).addClass('visible');
  });
  $('.contributor').mouseleave(function(){
    $(this).removeClass('visible');
});

}）;

这是“可见”类的代码：

.visible{
  background-image: url('../res/dev-1.png');
}

Answer 1

为什么使用jQuery？ 仅使用CSS和伪类:hover 。

.contributor:hover{
  background-image: url('../res/dev-1.png');
}

申请不同的div：

.contributor.diff-div:hover{
  background-image: url('../res/dev-2.png');
}

如果您可以在CSS中执行某些操作，则几乎总是比使用JavaScript 更好的解决方案

Answer 2

可能是您可以考虑使用css函数而不是addClass。

$(document).ready(function(){
  $('.contributor').mouseenter(function(){
      if(this.id == "one")
         $(this).css("background-image" , "url('../res/dev-1.png')");
      else if(this.id == "two")
         $(this).css("background-image" , "url('../res/dev-2.png')");
  });
  $('.contributor').mouseleave(function(){
    $(this).css("background-image" , "none");
  });
});

Answer 3

尝试使用jQuery。 假设您有6张图像，从dev-1.png到dev-6.png那么它将分别设置为div编号1至6的免费图像

$(document).ready(function(){
  $('.contributor').mouseover(function(){
     var index = $("div").index(this);
     index++;
     var bI= "background-image:url('../res/dev-"+index+".png');";
     $("this").eq(index).attr('style',bI);
  });
  $('.contributor').mouseleave(function(){
     var index = $("div").index(this);
     index++;
     var bI= "background-image:none";
     $("this").eq(index).attr('style',bI);
});

});

Answer 4

首先，将图片网址保存在名为“ imageurl”的属性中（浏览器不会对其进行解析）：

<div class="contributor" imgageurl="../res/dev-1.png"></div>
<div class="contributor" imgageurl="../res/dev-2.png"></div>

然后，使用以下jQuery代码：

$('.contributor').mouseenter(function(){
      var imgageUrl = $(this).attr("imageurl");
      $(this).css("background-image" , imgageUrl); 
  });
  $('.contributor').mouseleave(function(){
    $(this).css("background-image" , "none");
  });

当然，您还必须动态地构建HTML。

Answer 5

供参考（太麻烦了，如果您有很多元素，将不适用）

这可以通过纯CSS来实现。

图像可能需要一秒钟才能加载（随机图像服务）

工作示例：（ 无响应打开整页 ）

 .optionlist li { background: #111; color: #999; padding: .5em; list-style-type: none; border: 1px solid; max-width: 70px } .optionlist li:hover { background: red; } .optionlist li:hover:after { content: ''; width: 800px; height: 600px; position: fixed; top: 30%; left: 50%; transform: translate(-50%, -50%); } /* Start Background Control */ #red:after { background: url(http://lorempixel.com/800/600/) } #blue:after { background: url(http://lorempixel.com/800/601/) } #green:after { background: url(http://lorempixel.com/801/600/) } #yellow:after { background: url(http://lorempixel.com/801/601/) } #orange:after { background: url(http://lorempixel.com/799/600/) } #white:after { background: url(http://lorempixel.com/800/599/) } #black:after { background: url(http://lorempixel.com/801/599/) } /* End Background Control */ 

 <div class="optionlist"> <ul> <li id="red">Red</li> <li id="blue">Blue</li> <li id="green">Green</li> <li id="yellow">Yellow</li> <li id="orange">Orange</li> <li id="white">White</li> <li id="black">Black</li> </ul> </div>