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尝试此操作。假设您有六张图像从dev-1.png到dev-6.png，那么它会将它们分别设置为div 1到6的bacground

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

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

5 个答案: