那个念想 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 .

    评论

报告相同问题?

悬赏问题

  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名