你如何使用 html/css 进行图像翻转？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22410876/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you do an image rollover using html/css?
提问by user3420727
Im currently in the process of building a website for my graphic design work. On my home page Ive got a selection of images showing my work. I want to be able to hover over the images so they have an overlay showing the name of the project and what category it comes under. Ive researched that you can do this using html, using the following code -
我目前正在为我的平面设计工作建立一个网站。在我的主页上，我选择了一些展示我作品的图片。我希望能够将鼠标悬停在图像上，以便它们具有显示项目名称及其所属类别的叠加层。我研究过您可以使用 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>
however when i tried this, it didn't work on the preview, I've already heard that this method can cause problems and is pretty old school.
然而，当我尝试这个时，它在预览中不起作用，我已经听说这种方法可能会导致问题并且非常老派。
Ive also read that you can use CSS method by creating an image with the two images you want rolling over next to each other.
我还读到，您可以使用 CSS 方法创建一个图像，其中两个图像要并排滚动。
However if i do it this way will it be easy to put text over the rollover, as well as links. For example on the roller over image I will make the text using HTML and links, but is this easy to do using the CSS method?
但是，如果我这样做，将很容易将文本和链接放在翻转上。例如，在滚动图像上，我将使用 HTML 和链接制作文本，但是使用 CSS 方法是否容易做到这一点？
Here is a website that uses this method -
这是一个使用这种方法的网站 -
回答by Hector Ordonez
There are multiple approaches to this issue, depending always on your needs.
有多种方法可以解决此问题，这始终取决于您的需求。
I made a fiddle using only CSS with one of the approaches, you can see it working here.
我仅使用 CSS 和其中一种方法制作了一个小提琴，您可以在这里看到它的工作原理。
All you you need is:
您只需要：
1) Define a parent element "parentExample" containing the image and the text with a size. 2) Define image "imageExample" and text "textExample" to cover all the parent size and set the text to be hidden by default. 3) Define a hover "parentExample:hover" in which image is hidden and text display.
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;
}
回答by davidcondrey
An image
一个图像
div { background:url('http://www.placehold.it/200x200/f2f2f2') no-repeat; }
On hover display a different image
在悬停时显示不同的图像
div:hover { background:url('http://www.placehold.it/200x200/666666') no-repeat; }
If the element is an anchor or has some onclick function defined with it.. display a different image on select with a new class
如果元素是一个锚点或定义了一些 onclick 函数.. 使用新类在选择时显示不同的图像
div.selected { background:url('http://www.placehold.it/200x200/000000') no-repeat; }
回答by ghoston3rd
This is how the first figure image on the site is done in HTML:
这是网站上的第一个图形图像在 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>
</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>
回答by Mareks
You an use sprites; in CSS using background-position-x, -yproperties.
你使用精灵；在 CSS 中使用background-position-x,-y属性。
<div class="image"></div>
CSS:
CSS：
div.class {
background-image: url('../img/image.jpg');
}
div.class:hover {
background-x: -100px;
}
Providing you have a sprite image created (two or more images in one). On hover you are actually offsetting your image by 100pxto show the other image.
如果您创建了一个精灵图像（两个或多个图像合二为一）。在悬停时，您实际上是在偏移图像100px以显示其他图像。
回答by Mareks
you can simply do this with javascript and html and also with css and as follows:
您可以简单地使用 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>
futrher using innerHTMLhelpes you to gave more controls over your tag.
进一步使用可innerHTML帮助您对标签进行更多控制。
you can also use img tage insted of a div tag.
您还可以使用 img 标签插入 div 标签。
as you wish
如你所愿
