CSS-转换功能在链接上不起作用? [英] CSS - Transform function not working on links?
问题描述
当href的扩展名为.pdf时,我喜欢这样做; .doc; .ppt; .xls,然后它将在其前面添加相应的文件图片。然后,当我将链接悬停在链接上时,我尝试将其缩小,但是却什么也没做!我是在做错什么还是什么?
I did like so when a href's extension is .pdf; .doc; .ppt; .xls then it'll add corresponding file picture in front of it. Then I tried making a link go smaller when I hover over it but I doesn't do anything! Am I doing something wrong or what?
代码:
ul{
list-style-type: none;
}
ul a{
text-decoration:none;
padding-left: 20px;
background-repeat: no-repeat;
}
ul a:hover{
text-decoration:underline;
color:#666;
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
a[href$=".pdf"]{
background-image:url(http://i.stack.imgur.com/zJlYq.gif);
}
a[href$=".doc"]{
background-image:url(http://i.stack.imgur.com/z2lbW.gif);
}
a[href$=".ppt"]{
background-image:url(http://i.stack.imgur.com/Tk5Vv.gif);
}
a[href$=".xls"]{
background-image:url(http://i.stack.imgur.com/sOr7E.gif);
}
<ul>
<li><a href="/one.pdf">pdf</a></li>
<li><a href="/two.doc">doc</a></li>
<li><a href="/three.ppt">ppt</a></li>
<li><a href="/four.xls">xls</a></li>
</ul>
推荐答案
您应使用 display:inline-block
对于< a>
标签(或 display:block
),因为< a>
默认具有显示:内联
,但可转换元素不能与 display:inline
:
You should use display: inline-block
for <a>
tag (or display: block
), because <a>
has display: inline
by default, but transformable element can't be with display: inline
:
可变形元素-布局为由CSS框模型控制,该框模型可以是块级或原子内联级元素,也可以是...
Transformable element — an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or ...
内嵌块-此值使元素生成内嵌级块容器。内联块的内部被格式化为块框,元素本身被格式化为原子内联级别框。
Inline-block — this value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
ul {
list-style-type: none;
}
ul a {
text-decoration: none;
padding-left: 20px;
background-repeat: no-repeat;
display: inline-block;
}
ul a:hover {
text-decoration: underline;
color: #666;
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
a[href $= '.pdf'] {
background-image: url(http://i.stack.imgur.com/zJlYq.gif);
}
a[href $= '.doc'] {
background-image: url(http://i.stack.imgur.com/z2lbW.gif);
}
a[href $= '.ppt'] {
background-image: url(http://i.stack.imgur.com/Tk5Vv.gif);
}
a[href $= '.xls'] {
background-image: url(http://i.stack.imgur.com/sOr7E.gif);
}
<ul>
<li><a href="/one.pdf">pdf</a></li>
<li><a href="/two.doc">doc</a></li>
<li><a href="/three.ppt">ppt</a></li>
<li><a href="/four.xls">xls</a></li>
</ul>
这篇关于CSS-转换功能在链接上不起作用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!