html - 使用 CSS/HTML 更改悬停图像

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

score 109 · Accepted Answer

另一种选择是使用 JS：

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

score 92 · Accepted Answer

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

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

score 50 · Accepted Answer

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

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

我用两件燕尾服创建了 50 x 25 的图像，一件是彩色的，另一件是灰色的，
然后将图像指定为 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" />

和图像：

两格兔鞋

优点是：

通过将两个帧放在一个文件中，可以确保它们一次加载。这避免了当另一帧从不立即加载时慢速连接上的丑陋故障，因此第一次悬停永远不会正常工作。
以这种方式管理图像可能更容易，因为“配对”帧永远不会混淆。
通过巧妙地使用 Javascript 或 CSS 选择器，可以扩展它并在一个文件中包含更多帧。

从理论上讲，您甚至可以将多个按钮放在一个文件中并通过坐标控制它们的显示，尽管这种方法可能很快就会失控。

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

score 38 · Accepted Answer

使用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

score 7 · Accepted Answer

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

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

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

这个技巧是在要交换的图像的包装上完成的（这次是一个'a'标签，但可能是另一个），所以'hover_image'类已经放在那里。

优点：

如果需要更改它们，将两个图像 url 放在同一个位置会有所帮助。
似乎也可以与旧导航器一起使用（CSS2 标准）。
这是不言自明的。
悬停图像已预加载（悬停后无延迟）。

score 5 · Accepted Answer

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

我所做的是将原始图像和悬停图像放在 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");
    }
}

这对我来说是最简单和最有效的方法。

score 3 · Accepted Answer

您可以替换 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");
});

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

1

将标签更改img为 div 并在 CSS 中为其设置背景。

于 2013-09-15T14:11:14.130 回答

score 1 · Accepted Answer

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

score 1 · Accepted Answer

尝试其中之一

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

score 0 · Accepted Answer

每个人都使用背景图像选项回答他们缺少一个属性。高度和宽度将设置图像的容器大小，但不会调整图像本身的大小。需要背景大小来压缩或拉伸图像以适合此容器。我使用了“最佳答案”中的示例

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

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

score 0 · Accepted Answer

问题是您通过“src”属性设置了第一张图像，并在悬停时将背景图像添加到图像中。尝试这个：

在 html 中使用：

<img id="Library">

然后在CSS中：

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

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

score 0 · Accepted Answer

检查这个小提琴

我认为在您的情况下图像路径可能是错误的

语法看起来不错

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

score 0 · Accepted Answer

以你做事的方式，它不会发生。您正在更改图像的背景图像，该图像被原始图像阻挡。改变高度和宽度也不会发生。要更改图像的 src 属性，您需要 Javascript 或 jQuery 等 Javascript 库。但是，您可以将图像更改为简单的 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;

}

我希望这是你所要求的:)

score 0 · Accepted Answer

我建议尽可能只使用 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-image，您还可以将图像放入 div-container 中，如下所示：

HTML：

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

... 等等。

score 0 · Accepted Answer

我的 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 演示

问候

score 0 · Accepted Answer

0

使用“内容：；” 在悬停时。这有效。

于 2020-08-15T02:56:13.190 回答

score 0 · Accepted Answer

现场示例：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;
}

score -1 · Accepted Answer

我有一个类似的问题。

我的按钮定义如下：

<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)}

悬停功能工作得很好。

（不解决其他属性，如图像或容器的大小和位置，只是背景图像发生变化）

score -1 · Accepted Answer

这是简单的技巧。只需复制并粘贴它。

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

score -1 · Accepted Answer

只需使用 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>

html - 使用 CSS/HTML 更改悬停图像

22 回答 22

Related

Reference