医院 « 我的天

2012-06

利用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使用的问题。有例子，有真相

/*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;}

<!--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解决问题，不是有所有问题都一定能这般解决，但这次，我成功了。

不屈不挠，自己也能成为挽救自己的英雄！