利用hover嵌套显示div
罪过,今天晚上本打算和妈一起去医院然后再自己回来的,结果太用心研究点点模板以至于妈什么时候走的我都不知道……
昨天的台风严重坑爹,我们很傻冒地“严阵以待”,但是,今天早上发现啥事都没有,就赶紧跑路了。但前天沿江高速发生爆炸,封闭了,我们被迫兜了好大一个圈回广州。足足花了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解决问题,不是有所有问题都一定能这般解决,但这次,我成功了。
不屈不挠,自己也能成为挽救自己的英雄!
[…] 当鼠标移动到上面会显示出这个模板的信息。这就是我昨天介绍的div-div-a功能。 […]