如图所示，鼠标移动有一块高亮随着鼠标移动。代码如下：(vue3篇)

<div class="container"><span class="use-hover-hglh-element trail" :style="isShow ? dyStyle : { opacity: 0 }"></span></div>

javascript">  const isShow = ref(false)const dyStyle = {height: "240px",width: "240px",filter: "blur(48px)", //模糊程度，数值越大越模糊}onMounted(() => {const container = document.querySelector(".container")const trail = document.querySelector(".trail")container.addEventListener("mousemove", function (e) {isShow.value = true// 获取 container 的边界信息const rect = container.getBoundingClientRect()// 计算鼠标相对于 container 的位置const x = e.clientX - rect.leftconst y = e.clientY - rect.top// 将拖尾的元素位置更新到鼠标的位置trail.style.transform = `translate(${x}px, calc(${y}px - 50%))`})container.addEventListener("mouseleave", function () {isShow.value = falsetrail.style.removeProperty("transform")})})

css"> .container {z-index: 0;inset: 0px;overflow: hidden;border-radius: 12px;width: 300px;height: 300px;background: hsla(0, 0%, 100%, 0.5);border-radius: 12px;box-sizing: border-box;border: 1px solid #fff;margin-bottom: 16px;cursor: pointer;padding: 24px 24px 0;position: relative;transition: background color 0.3s;&:hover {background: linear-gradient(90deg, #33adff, #1a7af8);border-width: 0;color: #fff;}.use-hover-hglh-element {z-index: 0;position: absolute;left: -25%;top: 0%;padding-bottom: 58%;width: 58%;height: 0px;pointer-events: none;border-radius: 50%;background: rgb(0, 194, 255);filter: blur(24px);// opacity: 0;}}