如何使用 html/css 进行图像翻转？
Posted
技术标签:
【中文标题】如何使用 html/css 进行图像翻转？【英文标题】：How do you do an image rollover using 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 来完成这样的简单任务，你最终会得到一个不必要的复杂页面。
【参考方案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"
src=
"http://payload241.cargocollective.com/1/8/281332/7129129/prt_300x169_1390152506.jpg"
></div>
<div class="thumb_title">
<span class="text">New Year's Card</span>
</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> </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 以显示另一张图像。
【讨论】：
以上是关于如何使用 html/css 进行图像翻转？的主要内容，如果未能解决你的问题，请参考以下文章