CSS - Функция преобразования не работает с ссылками?

Question

Мне понравилось, когда расширение href является .pdf; .doc; .ppt; .xls, то он добавит соответствующее изображение файла перед ним. Затем я попытался сделать ссылку меньше, когда я нависаю над ней, но я ничего не делаю! Я что-то делаю неправильно или что?

Код:

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>

Answer 1

Вы должны использовать display: inline-block для <a> тега (или display: block), потому что <a> имеет display: inline по умолчанию, но transformable element не может быть с display: inline:

Transformable element - элемент которого расположение определяется блочная модель CSS, которая является либо блочной или атомарным элементом инлайн-уровня, или ...

Inline-block - это значение вызывает элемент для создания контейнера блока на уровне строки. Внутренняя часть встроенного блока форматируется как блок-блок, а сам элемент форматируется как атомный встроенный блок.

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>

Answer 2

Положите display: inline-block на элементы ссылок. Вы не можете преобразовать встроенные элементы. Кроме того, ваш синтаксис должен быть совершенно правдоподобным, хотя у вас, вероятно, слишком много префиксов. Только IE9 должен нуждаться в префиксе MS, я бы сомневался в необходимости других.

Answer 3

transform не применим к встроенным элементам, таким как <a>. Вы можете отобразить ссылку как встроенный блок или блок, чтобы заставить преобразовать работу!

трансформируемые элемент трансформируемой элемент представляет собой элемент в одной из этих категорий:

• элемент которого компоновка регулируются блочная модель CSS, которая является либо на уровне блоков или атомная inline- элемент уровня или свойство отображения которого вычисляется в таблице-таблице, таблице-строке-группе, таблице-заголовке-группе, таблице-колонтитуле, таблице-ячейке или заголовке таблицы [CSS21]

• элемент в пространство имен SVG и не управляется моделью окна CSS, которая имеет атрибуты transform, 'patternTransform' или gradientTransform [SVG11].

http://www.w3.org/TR/css3-transforms/#transformable-element
http://www.w3.org/TR/css3-transforms/#transform-property

Этот код работает:

ul{ 
 
    list-style-type: none; 
 
} 
 
ul a{ 
 
    display:inline-block; 
 
    text-decoration:none; 
 
    padding-left: 20px; 
 
    background-repeat: no-repeat; 
 
} 
 
ul a:hover{ 
 
    display:inline-block; 
 
    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://placehold.it/20x20); 
 
} 
 
a[href$=".doc"]{ 
 
    background-image:url(http://placehold.it/20x20); 
 
} 
 
a[href$=".ppt"]{ 
 
    background-image:url(http://placehold.it/20x20); 
 
} 
 
a[href$=".xls"]{ 
 
    background-image:url(http://placehold.it/20x20); 
 
}

<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>