通過「懸停」在css中的div來更改背景圖像

嘗試讓我的代碼在「spiral.svg」懸停時將背景圖像更改爲「color.jpg」。我想我越來越近了，肯定錯過了一些東西，但不知道那是什麼！通過「懸停」在css中的div來更改背景圖像

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

來源

2015-09-19 Ben Casalino

'Z-index'工作時'位置「被指定。 – CodeRomeos

你可以試試這樣的事情。

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

來源

2015-09-19 21:18:15 CodeRomeos

啊是的，這工作，但即時通訊設法瞄準標籤。我的懸停img實際上很小，我試圖讓它在懸停時替換原始背景圖片。開始認爲它可能不是沒有js/jquery –

你可能會縮放使用懸停CSS的圖像。默認情況下，它將與您指定的尺寸相同，並在懸停時將其縮放以適合屏幕上的彩色圖像。 – CodeRomeos

我可以得到它來改變圖像的規模，但這個鏈接http://stackoverflow.com/questions/26822311/hovering-over-an-image-changes-html-background?rq=1我正在閱讀說它是不可能的目標身體標籤爲此只需使用CSS即使閱讀正確，要去嘗試一些jQuery –

看起來這是不可能的，只是CSS/HTML但是，這是我發現的最好的鏈接使用jQuery的一點點https://stackoverflow.com/a/19770298/5225450

來源

2015-09-19 22:39:09

通過「懸停」在css中的div來更改背景圖像

回答

相關問題