logo标签列表

使用CSS/HTML在悬停时更改图像

htmlcssimagehover
84

我遇到了一个问题，当鼠标悬停时，我已经设置了一张图片来显示另一张图片，但是第一张图片仍然出现，新的图片没有改变高度和宽度，重叠在另一张图片上。 我对HTML/CSS还是很新手，可能错过了一些简单的东西。 这是代码：

<img src="LibraryTransparent.png" id="Library">

#Library {
    height: 70px;
    width: 120px;
}

#Library:hover {
    background-image: url('LibraryHoverTrans.png');
    height: 70px;
    width: 120px;
}
22个回答
1
将 img 标签更改为 div 并在 CSS 中设置其背景。
0

我的jQuery解决方案。

function changeOverImage(element) {
        var url = $(element).prop('src'),
            url_over = $(element).data('change-over')
        ;

        $(element)
            .prop('src', url_over)
            .data('change-over', url)
        ;
    }
    $(document).delegate('img[data-change-over]', 'mouseover', function () {
        changeOverImage(this);
    });
    $(document).delegate('img[data-change-over]', 'mouseout', function () {
        changeOverImage(this);
    });

和 HTML

<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=%3Cimg%20original%20/%3E&w=342&h=300" data-change-over="https://placeholdit.imgix.net/~text?txtsize=33&txt=%3Cimg%20over%20/%3E&w=342&h=300" />

示例：JSFiddle演示

敬礼

0

使用背景图片选项作为每个人的答案时，他们忽略了一个属性。高度和宽度将设置图像的容器大小，但不会调整图像本身的大小。需要使用background-size来压缩或拉伸图像以适应该容器。我使用了“最佳答案”中的示例。

<div id="Library"></div>
#Library {
   background-image: url('LibraryTransparent.png');
   background-size: 120px;
   height: 70px;
   width: 120px;
}

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
}
0

实时示例：JSFiddle

被接受的答案存在问题。图片没有被调整大小。使用background-size属性来调整图片大小。

HTML:

<div id="image"></div>

CSS：

#image {
   background-image: url('image1');
   background-size: 300px 390px;
   width: 300px;
   height:390px;
}

#image:hover{
  background: url("image2");
  background-size: 300px 390px;
}
0
我建议尽可能只使用CSS。我的解决方案是：
HTML:
<img id="img" class="" src="" />

CSS：

img#img{
    background: url("pictureNumberOne.png");
    background-size: 100px 100px;
    /* Optional transition: */
    transition: background 0.25s ease-in-out;
}
img#img:hover{
    background: url("pictureNumberTwo.png");
    background-size: 100px 100px;
}

这样做（不定义src属性）还可以确保透明图像（或具有透明部分的图像）正确显示（否则，如果第二张图片是半透明的，您也会看到第一张图片的部分）。

background-size属性用于设置背景图像的高度和宽度。

如果出于任何原因，您不想更改图像的背景图像，您也可以将图像放在div容器中，如下所示：

HTML：

<div id="imgContainer" class="">
    <img id="" class="" src="" />
</div>

...等等。

0
问题在于您通过“src”属性设置了第一张图片，并在悬停时为图像添加了背景图像。 请尝试以下操作：
在HTML中使用：
<img id="Library">

然后在 CSS 中：

#Library {
    height: 70px;
    width: 120px;
    background-image: url('LibraryTransparent.png');
}

#Library:hover {
    background-image: url('LibraryHoverTrans.png');
}
谢谢，我需要改变什么来解决这个问题？ - user2704743
你的解决方案在悬停上起作用了，但图片的大小没有改变吗？ - user2704743
你想进行更改吗？如果是的话，只需将正确尺寸添加到:hover 类中即可。 - Tomzan
0

检查一下这个fiddle

我觉得在你的情况下，图片路径可能是错误的

语法看起来没问题

background-image:url('http://www.bluecowcreative.ca/wp-content/uploads/2013/08/hi.jpg');
0
以你目前的方式，这是不可能的。你正在更改图像的背景图像，而原始图像被阻止了。更改高度和宽度也不会发生任何变化。要更改图像的src属性，您需要JavaScript或JavaScript库，例如jQuery。但是，您可以将图像更改为简单的div（文本）框，并在悬停时更改背景图像，即使div框本身为空。以下是如何实现的。
<div id="emptydiv"></div>

#emptydiv {

background-image: url("LibraryHover.png");
height: 70px;
width: 120px;

}

#emptydiv:hover {

background-image: url("LibraryHoverTrans.png");
height: 700px;
width: 1200px;

}

希望这正是你所需要的 :)

嗨，我一直在尝试这个解决方案，它修复了悬停问题，但大小仍然保持不变，我该怎么办？ - user2704743
看起来对我有效。我们能看看你的代码吗？这是我的：http://jsfiddle.net/kHBzh/ - Daniel Schwarz
0

使用"content:;"在悬停时。这将起作用。

1
你应该在你的回答中添加更多细节。 - Akhilesh Mishra
-1

这是一个简单的技巧。只需复制并粘贴即可。

<!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Change Image on Hover in CSS</title>
    <style type="text/css">
        .card {
            width: 130px;
            height: 195px;
            background: url("../images/card-back.jpg") no-repeat;
            margin: 50px;
        }
        .card:hover {
            background: url("../images/card-front.jpg") no-repeat;
        }
    </style>
    </head>
    <body>
        <div class="card"></div>
    </body>
    </html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接