Question

我让图片在悬停时旋转，但鼠标必须在图像上方。当行处于悬停状态时，如何使图像旋转？我试着在悬停的css中添加表格，但我可能做错了。

以下是HTML代码：

<table class="table table-hover table-striped">
          <thead>
            <tr>
              <th>Contest</th>
              <th>Fee</th>
              <th>Type</th>
              <th>1&nbsp;<img class="aa" src="img/a.png"></th>
              <th>2&nbsp;<img class="aa" src="img/b.png"></th>
              <th>3&nbsp;<img class="aa" src="img/c.png"></th>
              <th>4&nbsp;<img class="aa" src="img/d.png"></th>
            </tr>
          </thead>
          <tbody id="myTable">
            <tr>
              <td><img class="rotate" src="img/other/rotate.png">&nbsp;A</td>
              <td>B</td>
              <td>C</td>
              <td>D</td>
              <td>E</td>
              <td>F</td>
              <td><div class="btn btn-success btn-sm">GGG</div></td>
            </tr>

          </tbody>
        </table>

CSS：

.rotate {
width: 30px;
height: 30px;
-webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.rotate:hover{
    -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

Answer 1

您只需更改CSS选择器即可在.rotate内旋转类tr:hover的对象，如下所示：

.rotate {
width: 30px;
height: 30px;
-webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

tr:hover .rotate{
    -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

另见this fiddle。

将鼠标悬停在行

1 个答案: