鼠标悬浮旋转三角图标

• 样式图片

  
  image.png

• 代码

//css
.heade{
    vertical-align: middle;
    width: 100px;
    height: 60px;
}
.sanjiao{
    vertical-align: middle;
    display: inline-block;

    position: relative;
    top: 4px;
    width: 0;
    height: 0;
    border:4px solid transparent;
    border-top-color: blue;
    transition: all 0.3s ease-in-out;
    transform-origin: 50% 25%;
}

/* 悬浮三角形样式 */
.sanjiao_ac{
    transform: rotate(-180deg);
    
    border-top: 4px solid rgb(255, 136, 0);
}

 <!-- html -->
 <div class="heade">
        餐饮
        <div class="sanjiao"></div>
    </div>

 //悬浮三角形旋转
        $('.heade').mouseenter(function(){
            $(this).children('.sanjiao').addClass('sanjiao_ac');

        })
        $('.heade').mouseleave(function(){
            $(this).children('.sanjiao').removeClass('sanjiao_ac');

        })