在類中使用純CSS調整背景圖像的大小：hover

我有一張圖片，當鼠標經過時，我希望它更改爲另一張圖片。對我來說這似乎是正確的，但它總是顯得很大，在正常尺寸（128像素×128像素），並在另一個圖像。（另一位是一個div裏面用z-index：1），和一個與鼠標懸停IMG擁有的z-index：999在類中使用純CSS調整背景圖像的大小：hover

這裏是我的CSS

.class1{ 
    max-width:64px; 
    max-height:64px; 
} 
.class1:hover{ 
    background-image:url(http://img195.imageshack.us/MOUSEOVER_IMAGE.png); 
    width:64px; 
    height:64px; 
    z-index:999; 
    background-position:top center;

，這裏是我的形象

<a href="http://mylink"><img class=class1 src="http://imageshack.us/NORMAL_IMAGE.png" alt="some text here" /></a>

來源

2012-07-03 ghaschel

背景圖像將始終在背景中。這個元素中的任何元素都會在後臺運行，所以你試圖用css完成的任何操作都不起作用。你可以做的是使用javascript來改變'img'標籤的'src'。 –

如果我從img標籤中刪除src，並將background-image：url與正常的img添加到class1中，該怎麼辦？ – ghaschel

不，那不行。你可以刪除'img'標籤，並將其設置爲一個div來在其中設置'background-image'。 –

有這裏發生了一對夫婦的問題。像Tobas提到的，你在鏈接上使用了背景圖片，但你仍然有一個圖片子元素。 z-index不會將父元素的背景放在子元素的上方。

所以，你有幾個選擇：

1：IMG不透明度改爲0懸停：

img.class1:hover { opacity: 0 }

和背景圖像上使用的背景大小：

a:hover { 
    background: url(...); 
    background-size: 64px 64px; 
}

2：完全刪除子圖像，並將圖像作爲背景換出到鏈接。如果圖像沒有語義值，這是有道理的。

a { background: url(image1.png); } 

a:hover { background: url(image2.png); }

3：交換圖像本身使用javascript/jquery的：

$('img.class1').hover(function(){ 
    $(this).attr('src','image2.png'); 
}

來源

2012-07-03 13:35:21 chipcullen

第一個選項工作，但.class1：hover img似乎被瀏覽器忽略。 – ghaschel

好吧，我還沒有找到一種方法來使.class1：懸停img {不透明度：0}工作 – ghaschel

哦，哎呀，我搞砸了類。我將編輯我的帖子。 – chipcullen

您正在更改圖像的背景。除非您將其不透明度更改爲0，否則您將看不到背景。

我建議刪除圖像，並給你的班級a標籤。另外指定image-src作爲正常的背景。

.class1{ 
display:block; 
background-image:url(...); 
...} 
.class:hover{...}

和你的鏈接<a href="http://mylink" class="class1"> </a>

來源

2012-07-03 13:25:09 Tobas

給a標籤class1類，使它128px x 128px – ghaschel

不要忘記添加以下（含有background-image屬性的類/標籤/ DIV）的屬性。否則，在某些情況下會重複：

{ 
    background-size: contain; 
    background-repeat: no-repeat 
}

來源

2013-07-06 19:04:16 jaylad

在類中使用純CSS調整背景圖像的大小：hover

回答

相關問題