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

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

我能找到两个问题，

1. rotate 在 chrome 中工作正常，但在 firefox 中不工作。
2. 过渡并不像其他人提到的那样顺利。

所以对于第一个问题，将 hover pseudo 从图标更改为按钮，因为当 <i> 时 firefox 中存在问题内部使用 button .对于第二个，像其他人一样添加 transition .

@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;
}

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