如何在悬停时向不同的 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

首先，将图片url保存在名为“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 3

也许你可以考虑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 4

用 jquery 试试这个。假设您有从dev-1.png 到dev-6.png 的六张图像，那么它将分别将它们设置为 1 到 6 号 div 的背景

$(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 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>