当前位置:  开发笔记 > 前端 > 正文

CSS-转换功能在链接上不起作用?

如何解决《CSS-转换功能在链接上不起作用?》经验,为你挑选了1个好方法。



1> Sergey Denis..:

您应该使用display: inline-block标签(或display: block),因为display: inline默认,但变形元素不能与display: inline

可变形元素 -由CSS盒模型控制布局的元素,该CSS盒模型可以是块级或原子内联级元素,也可以是...

内联块 —此值使元素生成内联级块容器。内联块的内部被格式化为块框,元素本身被格式化为原子内联级别框。

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);
}
推荐阅读
php
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有