我想使用一個簡單的引導img-circle類，並將其交換爲懸停時的另一個圖像。我想要一個簡單的解決方案，同時仍然保持引導類來保持圖像在一個圓圈內。有沒有更好的方法來交換IMG另一個img懸停在bootstrap？

有沒有更好的方法在懸停時交換圖像，同時仍然保持引導類？

.circle { 
 
    height: 350px; 
 
    width: 350px; 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<img class="img-circle circle" src="http://placekitten.com/g/200/400"> 
 

 
<img class="img-circle circle" src="http://placekitten.com/g/210/400">

這裏有一個小提琴，注意我非常新來引導，而我只是在尋找這個答案的最佳解決方案。謝謝你們！

https://jsfiddle.net/vvyt6cyt/

來源

2016-03-09 ChosenJuan

比一個更好的辦法？你沒有描述任何交換圖像的方式。 – Turnip

可以使用僞類:hover來改變你的circle類background-image屬性。

工作小貓撥弄這裏https://jsfiddle.net/vvyt6cyt/3/

CSS：

.circle:hover { 
    background-image: url('your-kitty-url-here') 
}

來源

2016-03-09 22:16:55 Maxwelll

您可以包裝爲您img，並通過CSS做出hoverable。然後，您可以通過更改display屬性來交換圖像。

例如：

HTML

<div class="image-wrapper"> 
    <img class="img-circle circle" src="http://placekitten.com/g/200/400"> 
    <img class="img-circle circle" src="http://placekitten.com/g/210/400"> 
</div>

CSS

/* Display first image */ 
.image-wrapper > :first-child(){ 
    display: block; 
} 

.image-wrapper > :nth-child(2){ 
    display: none; 
} 

/* Display second image */ 
.image-wrapper:hover > :first-child(){ 
    display: none; 
} 

.image-wrapper:hover > :nth-child(2){ 
    display: block; 
}

我會試着改變你的方案中使用background-image代替。看看background-image，但是這一切都取決於你:)

有問題嗎？詢問下面的評論。

來源

2016-03-09 22:20:37 AGE

類似的，在[this Fiddle]（https://jsfiddle.net/vvyt6cyt/4/）中更改'z-index'。 – skobaljic

您可以使用具有背景的單個圖像標籤。

懸停重置大小和填充：

.circle {height:350px; width:350px;} 
 
.swap { 
 
    background:url(http://placekitten.com/g/210/400); 
 
    background-size:100% 100%; 
 
} 
 
.swap:hover { 
 
    height:0; 
 
    width:0; 
 
    padding:175px; 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<img class="img-circle circle swap" src="http://placekitten.com/g/200/400">

使用不同的效果過渡幾個例子：http://codepen.io/gc-nomade/pen/Joqzp

來源

2016-03-09 22:21:28

有沒有更好的方法來交換IMG另一個img懸停在bootstrap？

回答

HTML

CSS

相關問題