Gerardo Bautista Asked: 2020-04-02 10:45:34 +0800 CST 2020-04-02 10:45:34 +0800 CST 2020-04-02 10:45:34 +0800 CST 如何使用:hover 在 div 内旋转图标? 772 我有一个名为 的容器.btn,我想做的是在将容器悬停时将箭头旋转 90 度.btn <div class="btn"> <span>View my work</span> <i class="fas fa-chevron-right"></i> </div> css 2 Answers Voted Sebastián Miranda 2020-04-02T10:57:41+08:002020-04-02T10:57:41+08:00 我给你举一个我做过的例子,希望对你有帮助: 我所做的是只有箭头旋转,看看css,我指出它必须旋转的位置,如果你需要它在另一个方向上,你必须改变度数。 干杯 ps:按钮和箭头的名称没有居中,但对于教学主题它有效 #flecha { -moz-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; -webkit-transition: all 0.25s ease-out; } #flecha.rotamasmas { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container-fluid d-flex justify-content-center"> <div class="row col-lg-6 d-flex justify-content-center"> <button id="boton" class="btn btn-danger"> Importante <i id="flecha" class="material-icons ">arrow_right_alt</i></button> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $("#boton").hover(function(){ $("#flecha").addClass("rotamasmas"); },function(){ $("#flecha").removeClass("rotamasmas"); }); </script> </body> </html> 我更改了css并添加了jquery,最后是一个函数,这样我说“当你将鼠标悬停在按钮上时,向箭头添加一个类,当悬停完成时,删除类” Best Answer Orici 2020-04-02T12:20:34+08:002020-04-02T12:20:34+08:00 从Sebastián Miranda的回答开始,我只使用 CSS 解决方案。当指针放在按钮上时,图标会旋转 90º: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ejemplo</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <style type="text/css"> #flecha { font-weight: bold; position: relative; top: 8px; } .btn { padding: 0 12px 9px; } /* CSS solución */ #flecha { -moz-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; -webkit-transition: all 0.25s ease-out; } #boton:hover #flecha { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); } </style> </head> <body style="text-align:center"> <button id="boton" class="btn"> <span>Some text</span> <i id="flecha" class="material-icons">arrow_right_alt</i> </button> </body> </html>
我给你举一个我做过的例子,希望对你有帮助:
我所做的是只有箭头旋转,看看css,我指出它必须旋转的位置,如果你需要它在另一个方向上,你必须改变度数。
干杯
ps:按钮和箭头的名称没有居中,但对于教学主题它有效
我更改了css并添加了jquery,最后是一个函数,这样我说“当你将鼠标悬停在按钮上时,向箭头添加一个类,当悬停完成时,删除类”
从Sebastián Miranda的回答开始,我只使用 CSS 解决方案。当指针放在按钮上时,图标会旋转 90º: