Как победить растягивающейся div?

Рейтинг: 0Ответов: 1Опубликовано: 27.09.2014

http://jsfiddle.net/2cnqcrsy/

HTML

<div align="right"><a href="http://mail.ru"><div class="scMail" id="turnBack"></div></a></div>

CSS

.scMail {
background:url(http://i58.fastpic.ru/big/2013/1105/0c/4c84ffc8c07bd122d28fff13707ddc0c.jpg)  no-repeat;
    width:48px;
   height:48px;
}

.scMail:hover{

   background:url(http://i59.fastpic.ru/big/2013/1105/4e/dc445104da3d0a286646ea5bff61434e.png) no-repeat;
   -moz-transform: rotate(360deg); /* Для Firefox */
  -ms-transform: rotate(360deg); /* Для IE */
  -webkit-transform: rotate(360deg); /* Для Safari, Chrome, iOS */
  -o-transform: rotate(360deg); /* Для Opera */
  transform: rotate(360deg);
  -webkit-transition: 1.0s ease-in-out;
 }

Подскажите, пожалуйста, как решить проблему. Вот есть картинка, которая является ссылкой, но при такой записи див, в который она вложена, занимает всю строку, а следовательно клик по ссылке будет действовать не конкретно на картинке (как надо), а во всю ширину строки. Как это победить?

css html
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

jsfiddle