html悬停样式 背景突出/三角形/悬停时放大

<style>
    /* 将悬停效果应用于所有方框 */
    .box:hover {
        box-shadow: 5px 5px 15px #efefef;
        background-color: #f6f6f6;
        transition: all 0.1s ease;
        transform: scale(1.3); /* 文本放大 */
    }

    .triangle {
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        border-top: 50px solid #783CF9;
        border-left: 50px solid transparent;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .elementor-widget-wrap:hover .triangle {
        opacity: 1;
    }

    /* 新增 */
    .elementor-widget-wrap:not(:hover) .triangle {
        opacity: 0;
    }
</style>

<div class="elementor-widget-wrap box" style=" box-shadow: 5px 5px 5px #efefef;margin: 5px"> <div class="triangle"></div>

1.接下来，在每个方框的<div>元素中添加这个新的box类：

<div class="elementor-widget-wrap box" style="box-shadow: 5px 5px 5px #efefef; margin: 5px">
    <!-- 内容 -->
</div>

2.

接下来，在每个方框的合适位置添加一个具有triangle类的<div>元素：

<div class="elementor-widget-wrap" style="position: relative; box-shadow: 5px 5px 5px #efefef; margin: 5px">
  <div class="triangle"></div>
  <!-- 这里放置原始内容 -->
</div>