如何使用 html/css 进行图像翻转？答案

【问题标题】：How do you do an image rollover using html/css?如何使用 html/css 进行图像翻转？
【发布时间】：2014-04-20 02:11:15
【问题描述】：

我目前正在为我的平面设计工作建立一个网站。在我的主页上，我选择了一些展示我的作品的图片。我希望能够将鼠标悬停在图像上，以便它们具有显示项目名称及其所属类别的叠加层。我研究过您可以使用 html 执行此操作，使用以下代码 -

<a href="TARGET URL GOES HERE">
    <img src="URL OF FIRST IMAGE GOES HERE"
       onmouseover="this.src='URL OF SECOND IMAGE GOES HERE';"
       onmouseout="this.src='URL OF FIRST IMAGE GOES HERE';">
    </img>
</a>

但是当我尝试这个时，它在预览中不起作用，我已经听说这种方法可能会导致问题并且是相当老派的。

我还读到，您可以使用 CSS 方法，通过创建一个图像，将您想要滚动的两个图像放在一起。

但是，如果我这样做，将很容易将文本放在翻转以及链接上。例如，在滚动图像上，我将使用 HTML 和链接制作文本，但是使用 CSS 方法是否容易做到？

这是一个使用这种方法的网站 -

http://www.equisgarcia.com

【问题讨论】：

我可以推荐一个经典的：alistapart.com/article/sprites
How to show text on image when hovering?的可能重复
hm 我会用jquery 和onmouseover function 来解决它。例如，添加 span 和 style='display:none;，并在其中添加标题。在您的 jquery 函数中，您使用 slideUp slideDown 函数。
这不需要 JavaScript。如果你开始使用 JavaScript 来完成这样的简单任务，你最终会得到一个不必要的复杂页面。

标签： html css image text rollover

【解决方案1】：

有多种方法可以解决此问题，具体取决于您的需求。

我只使用 CSS 和其中一种方法做了一个小提琴 you can see it working here.

你只需要：

1) 定义一个父元素“parentExample”，其中包含图像和带有大小的文本。 2) 定义图像“imageExample”和文本“textExample”以覆盖所有父尺寸，并设置文本默认隐藏。 3）定义一个悬停“parentExample:hover”，其中隐藏图像并显示文本。

.parentExample {
    height: 400px;
    width: 400px;
}
.imageExample {
    height: 100%;
    width: 100%;
}
.textExample {
    height: 100%;
    width: 100%;
    display: none;
}

.parentExample:hover .imageExample {
    display: hidden;
}
.parentExample:hover .textExample {
    display: block;
}

【讨论】：

【解决方案2】：

一张图片

div { background:url('http://www.placehold.it/200x200/f2f2f2') no-repeat; }

悬停时显示不同的图像

div:hover { background:url('http://www.placehold.it/200x200/666666') no-repeat; }

如果元素是锚点或定义了一些 onclick 函数.. 使用新类在选择时显示不同的图像

div.selected { background:url('http://www.placehold.it/200x200/000000') no-repeat; }

【讨论】：

【解决方案3】：

这就是网站上的第一个图形图像是如何在 HTML 中完成的：

<html>
<head>
<title></title>
</head>

<body>
    <div id="pr_contain_item_7129129">
        <a class="nohover" href="/New-Year-s-Card" id="p7129129" name=
        "equisgarcia" onfocus="this.blur()" onmouseout=
        "this.className='nohover';" onmouseover="this.className='hover';" rel=
        "history"></a>

        <div class="loader_holder" id="load_7129129"><img src=
        "/_gfx/loadingAnim.gif"></div>

        <div class="cardimgcrop" id="cardthumb_7129129"><img border="0"
        data-hi-res=
        "http://payload241.cargocollective.com/1/8/281332/7129129/prt_300x169_1390152506_2x.jpg"
        height="169" src=
        "http://payload241.cargocollective.com/1/8/281332/7129129/prt_300x169_1390152506.jpg"
        width="300"></div>

        <div class="thumb_title">
            <span class="text">New Year's Card</span>&nbsp;
        </div>

        <div class="excerpt">
            Fig.ω
        </div>

        <div class="thumb_tag">
            <span class="text"><a href=
            "http://www.equisgarcia.com/filter/Lettering">Lettering</a>,
            <a href=
            "http://www.equisgarcia.com/filter/Print">Print</a>&nbsp;</span>
        </div>
    </div>
</body>
</html>

【讨论】：

【解决方案4】：

您可以简单地使用 javascript 和 html 以及 css 来执行此操作，如下所示：

<html>
    <style type="text/css">
        #sam{
            height: 100px;
            width: 100px;
background-color:#ccc;
        }
        #sam:hover{
            background-color: #eee;
        }
    </style>
<head>

    <script type="text/javascript">

        var change = function(){
            var x = document.getElementById("sam");
            x.innerHTML = "this is new";

        }
        var changeanother = function(){
            var x = document.getElementById("sam");
            x.innerHTML = " ";
        }   
    </script>
</head>
<body>
    <div id="div2"></div>
    <div id="sam" onmouseover="change();" onmouseout="changeanother();"> </div>
</body>
</html>

进一步使用innerHTML 可以帮助您对标签进行更多控制。

你也可以使用 div 标签的 img 标签。

如你所愿

【讨论】：

在我写这篇文章的时候电力已经消失了，但这是功能齐全的，你可以复制这段代码并测试，你会得到预期的结果。感谢礼貌。是的，我已经完成了，因为您使用了 onmouseover 和 onmouseout

【解决方案5】：

你使用精灵；在 CSS 中使用 background-position-x、-y 属性。

<div class="image"></div>

CSS：

div.class {
    background-image: url('../img/image.jpg'); 
}

div.class:hover {
    background-x: -100px;
}

假设您创建了一个精灵图像（两个或多个图像合二为一）。在悬停时，您实际上是在将您的图像偏移100px 以显示另一张图像。

【讨论】：