vue鼠标放到图片上会显示,离开会消失代码
时间: 2023-08-17 21:05:32 浏览: 116
要实现鼠标放到图片上显示,离开时消失的效果,可以使用 Vue 的事件绑定和条件渲染来实现。以下是一个示例代码:
```html
<template>
<div class="image-container">
<img
:src="imageSrc"
alt="Image"
@mouseover="showTooltip = true"
@mouseleave="showTooltip = false"
/>
<div v-if="showTooltip" class="tooltip">
<p>图片描述</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
imageSrc: "path/to/image.jpg",
showTooltip: false,
};
},
};
</script>
<style scoped>
.image-container {
position: relative;
display: inline-block;
}
.tooltip {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #f0f0f0;
padding: 10px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
```
在示例代码中,首先使用 `@mouseover` 和 `@mouseleave` 分别绑定鼠标移入和移出事件,当鼠标移入图片时,`showTooltip` 的值被设置为 `true`,触发条件渲染,显示图片描述的 `div` 元素;当鼠标移出图片时,`showTooltip` 的值被设置为 `false`,图片描述的 `div` 元素被隐藏。
你可以将 `imageSrc` 替换为你自己的图片路径,将图片描述的内容替换为你需要的文字。另外,示例代码中的样式是基本样式,你可以根据需要进行自定义样式。