CSS-转换功能在链接上不起作用? [英] CSS - Transform function not working on links?

查看:61
本文介绍了CSS-转换功能在链接上不起作用?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆