Question

我遇到这个问题，我将鼠标悬停在图像上以显示另一个图像，但是第一个图像仍然出现，而新图像不会改变高度和宽度，而是与另一个图像重叠。我仍然是HTML / CSS的新手，所以我可能错过了一些简单的东西。这是代码：

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

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

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

Answer 1

另一种选择是使用JS：

<img src='LibraryTransparent.png' onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" />

Answer 2

一种解决方案是将第一张图像用作背景图像，如下所示：

<div id="Library"></div>

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

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

如果你的过度图像有不同的尺寸，你必须这样设置：

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
   width: [IMAGE_WIDTH_IN_PIXELS]px;
   height: [IMAGE_HEIGHT_IN_PIXELS]px;
}

Answer 3

我通常做的是创建一个具有两种状态的双重图像，就像两帧胶片一样，然后我将其用作原始元素的背景，以便元素的宽度/高度设置为像素，导致仅显示图像的一半。然后悬停状态定义的基本上是“移动电影以显示另一帧”。

例如，假设图像必须是灰色的Tux，我们需要在悬停时更改为彩色Tux。而“hosting”元素是一个id为“tuxie”的跨度。

我创建了50 x 25图像，带有两个Tux，一个是彩色，另一个是灰色，
然后将图像指定为25 x 25范围的背景，
最后将悬停设置为只移动背景25px。

最小代码：

<style>
    #tuxie {
        width: 25px; height: 25px;
        background: url('images/tuxie.png') no-repeat left top;
    }
    #tuxie:hover { background-position: -25px 0px }
</style>

<div id="tuxie" />

和图片：

Two-frame Tuxie "film"

优点是：

通过将两个帧放在一个文件中，可确保它们已加载立刻。这可以避免在较慢的连接上出现丑陋的故障其他框架永远不会立即加载，因此首先悬停永远不会正常工作。
自“配对”框架以来，以这种方式管理图像可能更容易永远不会混淆。
通过智能地使用Javascript或CSS选择器，可以扩展这个和在一个文件中包含更多帧。

理论上，您甚至可以将多个按钮放在单个文件中并进行管理他们按坐标显示，虽然这种方法可以很快得到失控。

请注意，这是使用background CSS属性构建的，因此如果您确实需要使用<img />，则必须不设置src属性因为那与背景重叠。（认为在这里巧妙地使用透明度可能会产生有趣的结果，但可能非常依赖于图像质量和引擎质量。）。

Answer 4

使用content：

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

#Library:hover {
    content: url('http://www.furrytalk.com/wp-content/uploads/2010/05/2.jpg');
    height: 70px;
    width: 120px;
}

JSFiddle

Answer 5

以前所有答案的问题是悬停图像没有加载页面，因此当浏览器调用它时，加载需要时间，整个事情看起来不太好。

我所做的是将原始图像和悬停图像放在1个元素中，并首先隐藏悬停图像。然后在悬停时我显示悬停图像并隐藏旧图像，然后将鼠标悬停在相反的位置。

HTML：

<span id="bellLogo" onmouseover="hvr(this, 'in')" onmouseleave="hvr(this, 'out')">
  <img src="stylesheets/images/bell.png" class=bell col="g">
  <img src="stylesheets/images/bell_hover.png" class=bell style="display:none" col="b">
</span>

的JavaScript / jQuery的：

function hvr(dom, action)
{
    if (action == 'in')
    {
        $(dom).find("[col=g]").css("display", "none");
        $(dom).find("[col=b]").css("display", "inline-block");
    }

    else
    {
        $(dom).find("[col=b]").css("display", "none");
        $(dom).find("[col=g]").css("display", "inline-block");
    }
}

这对我来说是最简单，最有效的方式。

Answer 6

＆＃13;

.hover_image:hover {text-decoration: none} /* Optional (avoid undesired underscore if a is used as wrapper) */
.hide {display:none}
/* Do the shift: */
.hover_image:hover img:first-child{display:none}
.hover_image:hover img:last-child{display:inline-block}

＆＃13;

<body> 
    <a class="hover_image" href="#">
        <!-- path/to/first/visible/image: -->
        <img src="http://farmacias.dariopm.com/cc2/_cc3/images/f1_silverstone_2016.jpg" />
        <!-- path/to/hover/visible/image: -->
        <img src="http://farmacias.dariopm.com/cc2/_cc3/images/f1_malasia_2016.jpg" class="hide" />
    </a>
</body>

＆＃13;

为了改善这个Rashid的好答案，我添加了一些评论：

诀窍是在要交换的图像的包装上完成的（这次是一个＆＃39;标签，但也许是另一个），所以＆＃39; hover_image＆＃39;上课已被放在那里。

优点：

如果需要更改两张图片网址在同一个地方，则会有所帮助。
似乎也适用于旧的导航器（CSS2标准）。
这是自我解释。
悬停图片已预先加载（悬停后没有延迟）。

Answer 7

您可以替换HTML IMG的图像，而无需对容器div进行任何背景图像更改。

这是使用CSS属性box-sizing: border-box;获得的（它使您可以非常有效地将一种悬停效果放在<IMG>上。）

为此，请将这样的类应用于您的图像：

.image-replacement {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://akamaicovers.oreilly.com/images/9780596517748/cat.gif) no-repeat;/* this image will be shown over the image iSRC */
  width: 180px;
  height: 236px;
  padding-left: 180px;
}

示例代码：http://codepen.io/chriscoyier/pen/cJEjs

原创文章： http://css-tricks.com/replace-the-image-in-an-img-with-css/

希望这会帮助一些不想放置div以获得具有“悬停”效果的图像的人。

在此处发布示例代码：

HTML：

<img id="myImage" src="images/photo1.png" class="ClassBeforeImage-replacement">

jQuery的：

$("#myImage").mouseover(function () {
    $(this).attr("class", "image-replacement");
});
$("#myImage").mouseout(function () {
    $(this).attr("class", "ClassBeforeImage-replacement");
});

Answer 8

您无法使用CSS更改图像SRC属性（除非浏览器支持）。您可能希望将jQuery用于悬停事件。

$("#Library ").hover(
    function () {
         $(this).attr("src","isHover.jpg");
    },
    function () {
        $(this).attr("src","notHover.jpg");
    }
);

Answer 9

尝试其中一个

<img src='images/icons/proceed_button.png' width='120' height='70' onmouseover="this.src='images/icons/proceed_button2.png';" onmouseout="this.src='images/icons/proceed_button.png';" />

或者如果您将图片用作表格中的按钮

<input type="image" id="proceed" src="images/icons/proceed_button.png" alt"Go to Facebook page" onMouseOver="fnover();"onMouseOut="fnout();" onclick="fnclick()">
function fnover()
        {
            var myimg2 = document.getElementById("proceed");
            myimg2.src = "images/icons/proceed_button2.png";
        }

        function fnout()
        {
            var myimg2 = document.getElementById("proceed");
            myimg2.src = "images/icons/proceed_button.png";
        }

Answer 10

.foo img:last-child{display:none}
.foo:hover img:first-child{display:none}
.foo:hover img:last-child{display:inline-block}

<body> 
    <a class="foo" href="#">
        <img src="http://lojanak.com/image/9/280/280/1/0" />
        <img src="http://lojanak.com/image/0/280/280/1/0" />
    </a>
</body>

Answer 11

我的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 demo

此致

Answer 12

检查此fiddle

我认为图像路径可能是错误的

语法看起来正确

background-image:url('http://www.bluecowcreative.ca/wp-content/uploads/2013/08/hi.jpg');

Answer 13

将img标记更改为div并为其提供CSS背景。

Answer 14

问题是您通过'src'属性设置第一个图像，并在悬停时向图像添加背景图像。试试这个：

在html中使用：

<img id="Library">

然后在css：

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

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

Answer 15

每个人都使用background-image选项回答，他们缺少一个属性。高度和宽度将设置图像的容器大小，但不会调整图像本身的大小。压缩或拉伸图像以适合此容器需要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');
}

Answer 16

只需使用Photoshop并创建两个相同的图像，第一个是您希望它的外观，第二个是您希望它在悬停时的外观。我将图像包装在<a>标签中，因为我认为这是你想要的。对于这个例子，我正在做一个去饱和的facebook图标，但是当它悬停在它上面时会显示facebook的蓝色。

<a href="www.facebook.com"><img src="place of 1st image" onmouseover="this.src='place of 2nd image'" onmouseout="this.src='place of 1st image'"></a>

Answer 17

在你做事的方式中，它不会发生。您正在更改图像的背景图像，该图像被原始图像阻挡。也不会改变高度和宽度。要更改图像的src属性，您需要Javascript或JQuery库（如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;

}

我希望这就是你所要求的：）

Answer 18

直播示例：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;
}

Answer 19

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

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

Answer 20

我建议如果可能的话只使用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属性用于设置背景图像的高度和宽度。

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

<强> HTML：

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

......等等。

Answer 21

使用“ content :;”悬停。

Answer 22

我有类似的问题。

我的按钮定义如下：

<button  id="myButton" class="myButtonClass"></button>

我有这样的背景样式：

#myButton{ background-image:url(img/picture.jpg)}

.myButtonClass{background-image:url(img/picture.jpg)}

.myButtonClass:hover{background-image:url(img/picture_hover.jpg)}

当我将其切换为：

#myButton{}

.myButtonClass{background-image:url(img/picture.jpg)}

.myButtonClass:hover{background-image:url(img/picture_hover.jpg)}

悬停功能正常运行。

（不处理其他属性，例如图像或容器的大小和位置，只是背景图像在变化）

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

22 个答案: