HTML

Question

我想使用一个简单的bootstrap img-circle类，并在悬停时将其交换为另一个图像。我想要一个简单的解决方案，同时仍然保持引导类，以保持图像为圆形。

是否有更好的方法在悬停时交换图像，同时仍然保持引导类？

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

这是一个小提琴，注意我对bootstrap非常新，我只是在寻找这个答案的最佳解决方案。谢谢大家！

https://jsfiddle.net/vvyt6cyt/

Answer 1

您可以使用伪类:hover更改background-image类的circle属性。

工作小猫在这里小提琴https://jsfiddle.net/vvyt6cyt/3/

CSS：

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

Answer 2

您可以为img创建一个包装器，并通过CSS使其可以移动。然后，您可以通过更改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 ，但这完全取决于您：）

有任何问题吗？询问以下评论。

Answer 3

您可以使用带背景的单个图片代码。

悬停重置大小和填充：

＆＃13;

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

＆＃13;

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

＆＃13;

使用针对不同效果的转换的一些示例：http://codepen.io/gc-nomade/pen/Joqzp

在引导程序中悬停时，是否有更好的方法将img交换为另一个img？

3 个答案:

HTML

CSS