鼠標放上去,顯示圖片

<div id="a1" style=" position:absolute; z-index:2;"></div>

      <table width="200" border="0" cellpadding="0" cellspacing="0">
   <tr>
     <td><img src="http://www.baidu.com/img/baidu_logo.gif" alt="hi.baidu.com/liwya" onmousemove="show(event,'http://www.baidu.com/img/baidu_logo.gif','hi.baidu.com/liwya')"   onmouseout="hide(this)" /></td>
   </tr>
</table>

<script>
function show(event,_this,mess) {
    event = event || window.event;
    var t1="<table     cellspacing='1' cellpadding='10' style='border-color:#CCCCCC;background-color:#FFFFFF;font-size:12px;border-style:solid;    border-width:thin;text-align:center;'><tr><td><img src='" + _this   + "' width='300' height='225' >    <br>"+mess+"</td></tr></table>";
     document.getElementById("a1").innerHTML =t1;
      //document.getElementById("a1").innerHTML = "<img src='" + _this.src + "' >";
   document.getElementById("a1").style.top   = document.body.scrollTop + event.clientY + 10 + "px";
   document.getElementById("a1").style.left = document.body.scrollLeft + event.clientX + 10 + "px";
    document.getElementById("a1").style.display = "block";
}
function hide(_this) {
     document.getElementById("a1").innerHTML = "";
document.getElementById("a1").style.display = "none";
}
</script>

<think>我们被要求实现一个CSS效果:当鼠标悬停时,将一张图片替换为另一张图片。根据用户的问题,我们可以使用多种方法。参考提供的引用,我们可以采用以下方法:方法1:使用两张图片叠加,默认隐藏第二张,悬停时显示第二张(引用[1])。方法2:使用一张精灵图(sprite),通过改变背景位置来实现(引用[2])。方法3:使用CSS变量和JS实现更复杂的效果(引用[3]),但用户要求是纯CSS,所以我们先不考虑JS。另外,引用[4]提到了will-change属性,用于性能优化,但这不是必须的。我们首先介绍方法1,因为它比较直观。方法1步骤:1.创建一个容器(例如div),内部包含两张图片。2.第一张图片作为默认显示,第二张图片绝对定位在容器上,并且初始透明度为0(完全透明)。3.当鼠标悬停在容器上时,改变第二张图片的透明度为1(完全不透明),同时可以设置过渡效果。注意:容器需要设置为相对定位(position:relative),这样第二张图片的绝对定位才会相对于容器。方法2步骤:1.使用一个元素(例如a或div),设置其背景为精灵图,并显示第一部分(通常是正常状态)。2.当悬停时,改变背景位置,显示第二部分(悬停状态)。但是,方法2通常用于按钮等背景图片的切换,如果是<img>标签则不太适用。所以如果用户使用的是<img>标签,方法1更合适。根据用户问题,我们假设用户有两张单独的图片,所以我们使用方法1。下面我们给出方法1的代码示例:HTML结构:```html<divclass="image-container"><imgsrc="image1.jpg"alt="默认图片"><imgsrc="image2.jpg"alt="悬停图片"></div>```CSS样式:```css.image-container{position:relative;/*为绝对定位的子图片提供参考*/display:inline-block;/*根据内容调整大小*/}/*第二张图片绝对定位,覆盖在容器上*/.image-containerimg:last-child{position:absolute;top:0;left:0;opacity:0;/*初始透明*/transition:opacity0.5sease;/*过渡效果*/}/*鼠标悬停时,第二张图片变为不透明*/.image-container:hoverimg:last-child{opacity:1;}```注意:这里假设两张图片尺寸相同。如果不同,可能需要设置容器的宽高,并且让图片适应容器。另外,为了防止第一张图片在第二张显示时仍然在下面(如果第一张是块元素,它会占据空间),由于第二张是绝对定位,所以不会影响布局,但容器需要根据第一张图片的大小来定。因此,我们通常给容器设置和图片一样的宽高,或者由第一张图片撑开。如果希望有更好的性能,可以按照引用[4]的建议,在适当的时候使用will-change,例如:```css.image-containerimg:last-child{/*...其他样式...*/will-change:opacity;/*提前告诉浏览器该元素的不透明度将发生变化,以便优化*/}```但注意,will-change不要滥用,因为可能会消耗更多资源。现在,我们回答用户的问题,并提供代码示例。同时,按照要求生成相关问题。</think>### CSS鼠标悬停切换图片效果实现 要实现鼠标悬停时切换图片的效果,主要有以下几种方法: #### 方法1:图片叠加 + 透明度变化(推荐) ```html <div class="image-container"> <img src="default.jpg" alt="默认图片"> <img src="hover.jpg" alt="悬停图片"> </div> ``` ```css .image-container { position: relative; display: inline-block; } .image-container img:last-child { position: absolute; top: 0; left: 0; opacity: 0; /* 初始隐藏 */ transition: opacity 0.3s ease; /* 添加过渡效果 */ } .image-container:hover img:last-child { opacity: 1; /* 悬停时显示 */ } ``` **原理**:两张图片重叠放置,悬停时通过改变透明度实现切换效果[^1]。 #### 方法2:背景图切换(适合按钮/图标) ```css .button { display: inline-block; width: 200px; height: 200px; background: url(default.jpg) no-repeat; } .button:hover { background-image: url(hover.jpg); } ``` #### 方法3:CSS精灵图(Sprite) ```css .icon { width: 50px; height: 50px; background: url(sprite.png) no-repeat 0 0; /* 默认位置 */ } .icon:hover { background-position: -50px 0; /* 切换到第二张图 */ } ``` #### 性能优化建议: 1. 使用 `will-change: opacity;` 提升透明度变化的渲染性能[^4] 2. 添加过渡效果使切换更平滑: ```css transition: opacity 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); ``` 3. 预加载悬停图片避免闪烁: ```html <link rel="preload" href="hover.jpg" as="image"> ``` **注意事项**: - 确保两张图片尺寸相同 - 使用相对单位适应响应式布局 - 为无障碍访问添加 `alt` 文本 - 移动端设备需添加触摸支持 > 示例中方法1的效果展示:https://codepen.io/anon/pen/KKXeMXY
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值