通过“悬停”在 CSS 中的 div 上来更改背景图像答案

【问题标题】：change the background image by "hovering" over a div in css通过“悬停”在 CSS 中的 div 上来更改背景图像
【发布时间】：2015-12-16 20:38:39
【问题描述】：

试图让我的代码在“spiral.svg”悬停时将背景图像更改为“color.jpg”。我想我越来越近了，肯定错过了一些东西，但不确定那是什么！

HTML

   <div class ="spiral">
       <img src="spiral.svg">
    </div>

CSS

img {
    max-width: ???;
    max-height: ???;
}

.spiral:hover {
    background:url('color.jpg') center;
    z-index: some positive number higher than my orig background image?
}


body {
   background:url('orig.jpeg') center;
   z-index: -60;
}

【问题讨论】：

z-index 在指定 position 时有效。

标签： css background hover background-image mousehover

【解决方案1】：

看起来这仅使用 CSS/HTML 是不可能的，但这是我使用一点点 jquery https://stackoverflow.com/a/19770298/5225450 找到的最佳链接

【讨论】：

【解决方案2】：

你可以试试这样的。

.twitter{
  display:block;
  border:1px solid red;
  width: 30px;
  height:30px;
  background-image:url(http://i.imgur.com/qM7IYaM.png?1);
  background-position:-32px 31px;
  transition:0.1s;
}

.twitter:hover{
   background-position:-32px 63px;  
}

<div href="https://twitter.com/georgevere12" class="twitter">
  
</div>

【讨论】：

啊是的，这行得通，但我试图定位标签。我的悬停 img 实际上很小，我试图让它在悬停时替换原始背景图像。开始认为没有 js/jquery 可能无法实现
您可以在悬停时使用 css 缩放图像。默认情况下，它将与您指定的大小相同，并在悬停时缩放以适应彩色图像的屏幕。
我可以用它来改变图像的比例，但是我正在阅读的这个链接stackoverflow.com/questions/26822311/… 说如果我正确阅读它，仅使用 css 来定位 body 标签是不可能的, 试试 jquery