променете фоновото изображение, като задържите курсора на мишката над 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›. моето hover img всъщност е малко и се опитвам да го накарам да замени оригиналното фоново изображение, когато се задържи върху него. започвам да си мисля, че може просто да не е възможно без 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