通过将鼠标悬停在css中的div上来更改背景图像

Question

试图让我的代码在"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;
}

Answer 1

你可以试试这样的东西。

​

.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>

​

Answer 2

看起来这不可能只使用CSS/HTML，但是这是我使用少量jquery https://stackoverflow.com/a/19770298/5225450找到的最好的链接。