“mouseover”和“mouseleave”的事件侦听器

“mouseover”和“mouseleave”的事件侦听器
“mouseover”和“mouseleave”是两个常用的事件侦听器，用于处理鼠标在网页上移入和移出元素的操作。

“mouseover”事件：当鼠标指针移入一个元素时触发。可以通过添加“mouseover”事件侦听器来执行相应的操作，例如改变元素的样式、显示隐藏的内容等。
“mouseleave”事件：当鼠标指针移出一个元素时触发。可以通过添加“mouseleave”事件侦听器来执行相应的操作，例如恢复元素的样式、隐藏内容等。
这两个事件常用于网页交互和用户体验的改善，例如在导航菜单中，当鼠标移入菜单项时，可以显示子菜单；当鼠标移出菜单项时，可以隐藏子菜单。

案例：使用 CSS 和 Vue.js 来实现当鼠标悬停时，列表项的样式从 width: 17% 过渡到 width: 32%。

<template>
  <ul class="ywzs_bt">
    <li :class="{ 'cur': isHovered }" @mouseover="isHovered = true" @mouseleave="isHovered = false">
      <span>
        <img src="../assets/a_13.png" alt="Example Image"/>
        <b class="xtb2"></b>
      </span>
    </li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      isHovered: false
    };
  }
};
</script>
<style scoped>
.ywzs_bt {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ywzs_bt li {
  float: left;
  width: 17%;
  transition: all 0.4s ease-in-out;
}

.ywzs_bt li.cur {
  width: 32%;
}

.ywzs_bt img {
  width: 100%; /* Ensure image fits within the li element */
}

.ywzs_bt b.xtb2 {
  display: block;
  /* Add additional styles for b element as needed */
}
</style>