изменить фоновое изображение, наведя курсор на div в css

пытаясь заставить мой код изменить фоновое изображение на «color.jpg», когда «spiral.svg» зависает. Я думаю, что приближаюсь, определенно что-то упустил, но не уверен, что это такое!

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;
}

css background background-image hover mousehover
person Ben Casalino    schedule 19.09.2015    source источник
comment
z-index работает, когда указано position.   -  person CodeRomeos    schedule 20.09.2015

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете попробовать что-то вроде этого.

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

person CodeRomeos    schedule 19.09.2015
comment
Ах, да, это работает, но я пытаюсь настроить таргетинг на тег ‹boby›. мое изображение при наведении на самом деле маленькое, и я пытаюсь заставить его заменить оригинальное фоновое изображение при наведении курсора. начинаю думать, что это просто невозможно без js/jquery - person Ben Casalino; 20.09.2015
comment
вы можете масштабировать изображение, используя css при наведении. По умолчанию он будет такого же размера, как указанный вами, и масштабируется при наведении, чтобы соответствовать размеру экрана с цветным изображением. - person CodeRomeos; 20.09.2015
comment
Я могу заставить его изменить масштаб изображения, но эта ссылка stackoverflow.com/questions/26822311/ Я читал, что невозможно настроить таргетинг на тег body для этого, просто используя css, если я правильно его читаю, собираюсь попробуй jquery - person Ben Casalino; 20.09.2015

arrow_upward
0
arrow_downward

похоже, что это невозможно только с CSS/HTML, однако это была лучшая ссылка, которую я нашел, используя немного jquery https://stackoverflow.com/a/19770298/5225450

person Ben Casalino    schedule 19.09.2015