使用CSS/HTML在悬停时更改图像
use*_*743 71 html css image hover
我有这个问题,我设置一个图像,当鼠标悬停时显示另一个图像,但第一个图像仍然出现,新的图像不会改变高度和宽度,并重叠另一个.我仍然是HTML/CSS的新手,所以我可能错过了一些简单的东西.这是代码:
<img src="LibraryTransparent.png" id="Library">
#Library {
height: 70px;
width: 120px;
}
#Library:hover {
background-image: url('LibraryHoverTrans.png');
height: 70px;
width: 120px;
}
kur*_*age 94
另一种选择是使用JS:
<img src='LibraryTransparent.png' onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" />
- 虽然这是复活旧解决方案,但使用HTML嵌入样式确实是一种不好的做法.所有样式信息都应包含在样式标记内的HTML文件顶部,或者从外部样式表链接. (5认同)
Aur*_*osa 82
一种解决方案是使用第一个图像作为背景图像,如下所示:
<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;
}
Alo*_*dal 50
我通常做的是我创建一个具有两种状态的双重图像,就像两帧胶片一样,然后我将其用作原始元素的背景,以便元素的宽度/高度设置为像素,从而显示只有图像的一半.然后悬停状态定义的基本上是"移动电影以显示另一帧".
例如,假设图像必须是灰色Tux,我们需要在悬停时更改为彩色Tux.而"hosting"元素是一个id为"tuxie"的span.
- 我创建50 x 25图像与两个Tuxes,一个颜色和其他灰色,
- 然后将图像指定为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属性构建的,因此如果您确实需要使用<img />s,则不得设置src属性,因为它与背景重叠.(认为在这里巧妙地使用透明度可能会产生有趣的结果,但可能非常依赖于图像质量和引擎质量.)
- +1使用"精灵",Sprites使页面加载更快,一个很好的在线工具,可以帮助创建现有网站的精灵是[SpriteMe](http://spriteme.org/),它是非常有用的创建精灵更快因为它会为你创建新的CSS和图像. (2认同)
Vuc*_*cko 32
用途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;
}
- 我认为这是最好的解决方案。它更简单，使用正确的 <img> 标签，并且不必担心背景重复和类似的东西。 (3认同)
- 我发现这取决于浏览器。适用于 Chrome，但不适用于 Firefox 或 IE11。 (2认同)
.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'类放在了那里。
好处：
如果需要更改，将两个图像放在同一位置会很有帮助。
似乎也可以与旧的导航器一起使用（CSS2标准）。
这是自我解释。
悬停图像已预加载（悬停后无延迟）。
所有以前的答案的问题是悬停图像没有加载页面,所以当浏览器调用它时,加载需要时间,整个事情看起来不太好.
我所做的是将原始图像和悬停图像放在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");
}
}
这对我来说是最简单,最有效的方法.