<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>