那个念想 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 安卓adb backup备份应用数据失败
  • ¥15 eclipse运行项目时遇到的问题
  • ¥15 关于#c##的问题:最近需要用CAT工具Trados进行一些开发
  • ¥15 南大pa1 小游戏没有界面,并且报了如下错误,尝试过换显卡驱动,但是好像不行
  • ¥15 没有证书,nginx怎么反向代理到只能接受https的公网网站
  • ¥50 成都蓉城足球俱乐部小程序抢票
  • ¥15 yolov7训练自己的数据集
  • ¥15 esp8266与51单片机连接问题(标签-单片机|关键词-串口)(相关搜索:51单片机|单片机|测试代码)
  • ¥15 电力市场出清matlab yalmip kkt 双层优化问题
  • ¥30 ros小车路径规划实现不了,如何解决?(操作系统-ubuntu)