那个念想 2013-10-08 01:35 采纳率: 25%
浏览 3880

怎样把下面这段代码用纯CSS方法改成鼠标悬浮后右边图像自动显示出对应的图片?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



AcFun /* CSS Document */ body{/* css注释说明:兼容ie6 支持标签使用hover */ behavior:url("csshover.htc"); } a{/*去掉a标签下划线*/ text-decoration:none; } .none{ display:none; } .onmose{ width:230px; height:50px; margin:0 auto; background-color:#FFFFFF; position:relative; cursor:pointer; overflow:hidden; } #tab_1:hover,#tab_2:hover,#tab_3:hover,#tab_4:hover,.onmose:hover .now{/*鼠标移上去后a标签的样式*/ bottom:0; left:0; display:block; width:230px; height:60px; line-height:1px; background-color:#00CCFF; margin:0; } dl{ width:710px; height:265px; float:left; padding:0; margin:0; } dt{ width:230px; height:265px; padding:0; margin:0; line-height:1px; float:left; border:1px solid #CCCCCC; } dl:hover #p1{/*TAB切换*/ display:block; } #p1,#p2,#p3,#p4{ width:480px; height:265px; padding:0; margin:0; text-align:center; float:right; border:1px solid #CCCCCC; } dl:hover a{/*显示隐藏的下拉*/ display:block; } dd{/*图片区*/ overflow: hidden; } .title{ color:#0099FF; } .desc{ color:#CCCCCC; margin-top:-1px; } .more{ bottom: 4px; float:right; background-color:#333333; color:#FFFFFF; display:none; text-align:center; font-size:12px; width:50px; height:20px; padding-top:5px; }




更多


  • 写回答

1条回答

  • wangchengyi_888 2013-10-08 01:46
    关注

    纯css 不是很好实现,建议用js+css .

    评论

报告相同问题?

悬赏问题

  • ¥15 虚拟机打包apk出现错误
  • ¥30 最小化遗憾贪心算法上界
  • ¥15 用visual studi code完成html页面
  • ¥15 聚类分析或者python进行数据分析
  • ¥15 逻辑谓词和消解原理的运用
  • ¥15 三菱伺服电机按启动按钮有使能但不动作
  • ¥15 js,页面2返回页面1时定位进入的设备
  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 (希望可以解决问题)ma和mb文件无法正常打开,打开后是空白,但是有正常内存占用,但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝