Question

我遇到一个问题，确定为什么在CSS转换应用于图标/链接后，它会重绘在错误的位置。

＆＃13;

div.rotate > a {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  overflow: hidden;
}
div.rotate > a:hover {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<p>Why do the icons/links redraw in the wrong place after hover?</p>
<div class="rotate"> <a href="http://github.com/"><i class="fa fa-github-square fa-2x"></i></a>	 <a href="http://linkedin.com/"><i class="fa fa-linkedin-square fa-2x"></i></a>
  <a href="http://rssfeed.com/rss"><i class="fa fa-rss-square fa-2x"></i></a> 
</div>

＆＃13;

Answer 1

如果链接有图像，则链接必须是块元素。

然后你需要容器，所以要正确设置它们。

主要要求是将链接作为块元素。

<强>固定

＆＃13;

ul li {
  display: inline-block;
  list-style: none;
}
ul.rotate a {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  display:block;
  
}
ul.rotate a:hover {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<p>Why do the icons/links redraw in the wrong place after hover?</p>

<ul class="rotate">
  <li>
    <a href="http://github.com/"><i class="fa fa-github-square fa-2x"></i></a>
  </li>
  <li>
    <a href="http://linkedin.com/"><i class="fa fa-linkedin-square fa-2x"></i></a>
  </li>
  <li>
    <a href="http://rssfeed.com/rss"><i class="fa fa-rss-square fa-2x"></i></a> 
  </li>
</ul>

＆＃13;

Answer 2

尝试将display: inline-block;添加到div.rotate > a

<强>段

＆＃13;

div.rotate > a {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  overflow: hidden;
  display: inline-block;
}
div.rotate > a:hover {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<p>Why do the icons/links redraw in the wrong place after hover?</p>
<div class="rotate"> <a href="http://github.com/"><i class="fa fa-github-square fa-2x"></i></a>	 <a href="http://linkedin.com/"><i class="fa fa-linkedin-square fa-2x"></i></a>
  <a href="http://rssfeed.com/rss"><i class="fa fa-rss-square fa-2x"></i></a> 
</div>

＆＃13;

Answer 3

你需要像这样制作锚内联块：

＆＃13;

var $dayFields = $('#sortable2 li').find('#day');
var $sumHrsFields = $('#sortable2 li').find('#sumHrs');

var hrsArray = $("#sortable2 li").find("#hrsSpan").map(function () { return $(this).text() }).get();            
//Add all the hrs together to get the total
for (var i in hrsArray) {
    total += hrsArray[i];
    if (total / 7.5 <= 1) {
        $($dayFields.get(i)).html('1');
        $($sumHrsFields.get(i)).html(total);
    }
    else if (total / 7.5 > 1) {
        dayText = total / 7.5;
        //if the dayText value ends up as a whole number, don't do anything. If it isn't, round down to whole number and add 1
        if (dayText % 1 == 0) {

        } 
        else {
            dayText = dayText | 0;
            dayText += 1; 
        }
        $($dayFields.get(i)).html(dayText);
        $($sumHrsFields.get(i)).html(total-(7.5));
    }
}

＆＃13;

div.rotate > a {
    display: inline-block;
    transition: transform 0.8s;
    overflow: hidden;
}
div.rotate > a:hover {
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
}

＆＃13;

这适用于所有当前浏览器并且符合标准，与其他一些仅适用的答案不同。它也更清洁。

如果您不介意更改HTML，这可能是更好的方法：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<p>Why do the icons/links redraw in the wrong place after hover?</p>
<div class="rotate">
  <a href="http://github.com/"><i class="fa fa-github-square fa-2x"></i></a>	
  <a href="http://linkedin.com/"><i class="fa fa-linkedin-square fa-2x"></i></a>
  <a href="http://rssfeed.com/rss"><i class="fa fa-rss-square fa-2x"></i></a> 
</div>

＆＃13;

ul li {
  display: inline-block;
  list-style: none;
}
a.rotate {
    display: block;
    transition: transform 0.8s;
    overflow: hidden;
}
a.rotate:hover {
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
}

＆＃13;

为什么在图标/链接上进行css转换会导致在应用转换后在错误的位置重绘？

3 个答案: