利⽤CSS中的content属性来获取标签元素中的某个属性值⾸先必须声明⼀下,不知道content是什么的朋友请去翻⼀下CSS⼿册,如果不知道CSS⼿册是什么的朋友请⽆视这篇烂⽂,因为这篇烂⽂是我在⽹上看到有⼈提到说,如何利⽤CSS来获取某个标签中的属性值时想到的,权当博客充数的⽂章。
在HTML中有⼀个title属性相信各位页⾯仔同仁们应该都知道的,这个title属性呢可以让我们让在⿏标悬停在某个内容上时出现⼀个⼩黄条来显⽰更多的⼀些⽂本信息。以前也有很多⼈通过在某个标签中再嵌套⼀个标签,然后结合JS的⽅式让那个多嵌套的标签模拟title的效果(当然也是会去美化⼀下的)。
不会JS,⼿⼜⼗分⽋的⼈,记得以前在CSS⼿册⾥看到过有⼀个属性可以读取标签属性值的,翻⼀下,搞出⼀个简单的丑陋的效果,⽊有demo,因为代码很简单,⼜懒得打开FTP上传,抱歉。
XML
border radius什么意思1<a href="blog.linxz.de/">⼩志博客</a>
CSS
1 2a {position:relative;float:left;height:20px;font-size:12px;}
a:hover:after {position:absolute;top:16px;left:0;content:attr(href);padding:2px5px;color:#000000;border:
1px solid#99CC29;background-color:#E5E5E5;border-radius:3px;box-shadow:0 1px0#000000;}
代码中重点的是利⽤:after或者:before,然后让content来读取标签内的属性值。content:attr(href)
attr(这⾥放标签中的那个属性,浏览器会去读取属性值的)
最后的最后,再废话⼀句,不是所有浏览器都⽀持的哈。如果要所有浏览器都⽀持的话,那么就是前⾯所提到的,多嵌套⼀个标签,然后结合JS来实现。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。