那个念想 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 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
  • ¥15 Arcgis相交分析无法绘制一个或多个图形
  • ¥15 关于#r语言#的问题:差异分析前数据准备,报错Error in data[, sampleName1] : subscript out of bounds请问怎么解决呀以下是全部代码:
  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格