2 u012363465 u012363465 于 2013.10.08 09:35 提问

怎样把下面这段代码用纯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
wangchengyi_888   2013.10.08 09:46

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

u012363465
u012363465 我知道,但是现在只能用CSS实现不能用JS,很急,求各位帮忙解答下,感激不尽
4 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!