2012-06
30

利用hover嵌套显示div

By xrspook @ 23:59:09 归类于: 烂日记

罪过,今天晚上本打算和妈一起去医院然后再自己回来的,结果太用心研究点点模板以至于妈什么时候走的我都不知道……

昨天的台风严重坑爹,我们很傻冒地“严阵以待”,但是,今天早上发现啥事都没有,就赶紧跑路了。但前天沿江高速发生爆炸,封闭了,我们被迫兜了好大一个圈回广州。足足花了2个小时!虽然路上没有塞车,但用时却是平时的2倍多。

我对省人民医院没什么好感。就像我不崇拜大明星一样,我也不崇拜大医院。那个楼陈旧啊,那个房间陈旧啊,病房小到了一个境界,而那些病床配套的椅子更是历史悠久。或许在我懂事以后我不知道很烂很烂的病房到底是怎么个模样的吧,我看太多米国医务剧了,我看太多香港医务剧了,我只接触过一个广医二院新盖不久的住院楼。

外婆这次是去换心脏起搏器,要做那玩意的手术,通常医院极快就有床位了,前提是你的手术没啥风险,比如说你年纪不大,你没啥并发症神马的。因为,一个1小时的手术,单是那个起搏器本身就已经得花两万到是几十万不等了,不知道这其中的水分有多少,但几天的住院期,一小时的手术就能不知道赚多少,因为起搏器这东西医保是不包的,即便能报销,也只是一点点,所以…… 生命本来是非常宝贵的东西,但无意中却跟臭钱扯上关系,那可真是让人不快。但是,如果能挽救生命,花再多的钱又算什么呢,毕竟钱没有了,还能重新赚回来,生命没有了,绝对没有TAKE TWO了!

今天晚上花了很多时间去研究到底可不可以用一个div的hover属性触发出另外一个div,用div-a-div是肯定能做到的,但这样话,第二个div就不能嵌套a了,因为这是一个错误的写法。但如果用div-div-a的话,就完全没问题。

经过N多次的尝试,我觉得这是一个position:absolute/relative以及display:block/none使用的问题。有例子,有真相

1
2
3
4
5
6
7
8
/*CSS部分*/
 
#side{position:absolute;left:-48px; top:40px;width:50px;display:block;}
#side-tabs {background:url(http://x.libdd.com/farm1/5b7f4a/fbba4837/slide-bg.jpg);text-align:center;padding:5px;font-size:16px;display:block;color:#ccc;position:absolute;}
#side-tabs:hover .side-panel{top:0;left:50px;position:absolute;display:block;width:300px;z-index:25;}
#side-tabs .side-panel{background:url(http://x.libdd.com/farm1/5b7f4a/fbba4837/slide-bg.jpg);left:50px;width:300px;height:40px;display:none;position: absolute;padding:5px;word-wrap:break-all;line-height:1.5em;text-align:left;font-size:small;}
#side-tabs .side-panel a{color:#ffffff;}
#side-tabs .side-panel a:hover{color:#ccc;}
1
2
3
4
5
6
7
8
<!--XHTML部分-->
 
<div id="side">
	<div id="side-tabs">关于模板
		<div class="side-panel">Designed by <a href="http://blog.etcetradesign.net" title="Theme Creator Site">Idraki Muhamad</a><br />Modified by <a href="http://www.xlanda.net/">xrspook</a>
		</div>		
	</div>	
</div>

最重要的是要通过hover被显示的div必须position:absolute,且在非hover的设置下为display:none。利用hover引出第二层div的首层div必须设置为display:block/inline-block,position可以是absolute或者relative。

我不懂js和jQuery,所以我一直在努力研究只用XHTML和CSS解决问题,不是有所有问题都一定能这般解决,但这次,我成功了。

不屈不挠,自己也能成为挽救自己的英雄!

一条评论

  1. […] 当鼠标移动到上面会显示出这个模板的信息。这就是我昨天介绍的div-div-a功能。 […]

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image

COPYRIGHT @ 我的天 | Theme by xrspook | Power by WordPress | Valid XHTML 1.1 and CSS 3 Go to top