为了账号安全,请及时绑定邮箱和手机立即绑定

用CSS/HTML在悬停状态下更改图像

用CSS/HTML在悬停状态下更改图像

侃侃尔雅 2019-08-03 16:45:31
用CSS/HTML在悬停状态下更改图像当鼠标悬停时,我设置了一个图像来显示另一个图像,但是第一个图像仍然出现,新的图像不会改变高度和宽度,并与另一个图像重叠。我仍然是HTML/CSS的新手,所以我可能错过了一些简单的东西。以下是代码:<img src="LibraryTransparent.png" id="Library">#Library {     height: 70px;     width: 120px;}#Library:hover {     background-image: url('LibraryHoverTrans.png');     height: 70px;     width: 120px;}
查看完整描述

3 回答

?
慕容3067478

TA贡献1773条经验 获得超3个赞

一种解决方案是使用第一幅图像作为背景图像,如下所示:

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

如果您的OverImage有不同的大小,则必须将它们设置如下:

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
   width: [IMAGE_WIDTH_IN_PIXELS]px;
   height: [IMAGE_HEIGHT_IN_PIXELS]px;}



查看完整回答
反对 回复 2019-08-03
?
慕无忌1623718

TA贡献1744条经验 获得超4个赞

我通常做的是,我创建一个两种状态的双重图像,就像一种两帧电影,然后我用它作为原始元素的背景,使元素的宽度/高度以像素为单位,结果只显示了图像的一半。然后悬停状态定义的基本上是“移动胶片以显示另一帧”。

例如,想象一下图像必须是灰色的图钉,我们需要在悬停时换成彩色的图克斯。而“宿主”元素是一个带有id“tuxie”的span。

  1. 我用两个燕尾管创建了50x25图像,一个是彩色的,另一个是灰色的,
  2. 然后把图像作为25x25跨度的背景,
  3. 最后,将悬停设置为向左移动背景25 px。

最小代码:

<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选择器,您可以扩展它并在一个文件中包含更多的帧。

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

请注意,这是用background属性,因此如果您确实需要使用<img />S,你必须设置src属性,因为这与背景重叠。(在这里聪明地使用透明度可能会带来有趣的结果,但可能非常依赖于图像的质量以及引擎的质量。)



查看完整回答
反对 回复 2019-08-03
  • 3 回答
  • 0 关注
  • 696 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信