Question

我试图在鼠标悬停时使图标旋转但无法使其工作。我无法在互联网上找到解决方案。这是我到目前为止所尝试的：

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

.material-icons:hover {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}
button.c-accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 5px;
  width: 50%;
  border: none;
  border: 1px solid #CBCBCB;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.float-right{
  float: right;
}

<button class="c-accordion">Section 2
      <i class="material-icons float-right">keyboard_arrow_down</i> 
  </button>

Answer 1

能够找到两个问题，

rotate在chrome中工作正常，但在firefox中无效。
过渡并不像其他人所说的那样顺利。

因此，对于第一个问题，将hover伪从图标更改为按钮，因为<i>在button内使用transition时，在Firefox中存在问题。对于第二个跟随其他人添加@import url('https://fonts.googleapis.com/icon?family=Material+Icons'); .c-accordion:hover .material-icons { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); transition: all .3s ease; } button.c-accordion { background-color: #eee; color: #444; cursor: pointer; padding: 5px; width: 50%; border: none; border: 1px solid #CBCBCB; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .float-right { float: right; }。

＆＃13;

<button class="c-accordion">Section 2
          <i class="material-icons float-right">keyboard_arrow_down</i>

＆＃13;

 $(".upload").click(function () {

 var filename = $("#file").val();
 var extension = " ";
 })

＆＃13;

Answer 2

图标旋转鼠标悬停在Chrome上，但不在Mozilla Firefox上同样的代码在我身边的Chrome上工作

如何在悬停时使用CSS旋转图标

2 个答案: