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