css 鼠标经过边框高亮

<template>
  <div class="topmenu">
      <div class="child">
        <div class="inner">
          sdfsdfsdf
        </div>
      </div>
      <div class="child">
        <div class="inner">
          sdfsdfsdf
        </div>
      </div>
      <div class="child">
        <div class="inner">
          sdfsdfsdf
        </div>
      </div>
      <div class="child">
        <div class="inner">
          sdfsdfsdf
        </div>
      </div>
      <div class="child">
        <div class="inner">
          sdfsdfsdf
        </div>
      </div>
      <div class="child">
        <div class="inner">
          sdfsdfsdf
        </div>
      </div>
  </div>
</template>

<script>



export default {
  mounted:function(){
      const cards = document.querySelectorAll(".child")
window.addEventListener('mousemove',e=>{
  for(const card of cards){
            const rect = card.getBoundingClientRect()
          const x = e.clientX-rect.left-rect.width/2
          const y = e.clientY-rect.top-rect.height/2

          card.style.setProperty('--x',`${x}px`)
          card.style.setProperty('--y',`${y}px`)
  }
})
  }
}
</script>

<style >
body{
  background-color: #000;
}
.topmenu{
  width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px;
}

.child{
  
  width: 300px;
  height: 300px;
  background-color:red;
  position: relative;
  overflow: hidden;
}
.child::before{
  width: 100%;
  height: 100%;
  content: '';
  display: block;
  inset:0px;
  background-color: aliceblue;
  transform: translate(var(--x,100px),var(--y,100px));
}
.inner{
  position:absolute;
  inset:4px;
  background-color: aqua;
}

</style>

 

<template>

  <div class="topmenu">

      <div class="child">

        <div class="inner">

          sdfsdfsdf

        </div>

      </div>

      <div class="child">

        <div class="inner">

          sdfsdfsdf

        </div>

      </div>

      <div class="child">

        <div class="inner">

          sdfsdfsdf

        </div>

      </div>

      <div class="child">

        <div class="inner">

          sdfsdfsdf

        </div>

      </div>

      <div class="child">

        <div class="inner">

          sdfsdfsdf

        </div>

      </div>

      <div class="child">

        <div class="inner">

          sdfsdfsdf

        </div>

      </div>

  </div>

</template>

<script>

export default {

  mounted:function(){

      const cards = document.querySelectorAll(".child")

window.addEventListener('mousemove',e=>{

  for(const card of cards){

            const rect = card.getBoundingClientRect()

          const x = e.clientX-rect.left-rect.width/2

          const y = e.clientY-rect.top-rect.height/2

          card.style.setProperty('--x',`${x}px`)

          card.style.setProperty('--y',`${y}px`)

  }

})

  }

}

</script>

<style >

body{

  background-color: #000;

}

.topmenu{

  width: 100%;

display: flex;

flex-wrap: wrap;

justify-content: center;

align-items: center;

gap: 10px;

}

.child{

 

  width: 300px;

  height: 300px;

  background-color:red;

  position: relative;

  overflow: hidden;

}

.child::before{

  width: 100%;

  height: 100%;

  content: '';

  display: block;

  inset:0px;

  background-color: aliceblue;

  transform: translate(var(--x,100px),var(--y,100px));

}

.inner{

  position:absolute;

  inset:4px;

  background-color: aqua;

}

</style>