编写js,当鼠标移入li标签内容时,class为limg的区域显示相对应的作品图片,其他作品不显示
时间: 2023-09-11 08:08:34 浏览: 37
假设你有以下的 HTML 结构:
```html
<ul>
<li data-img="img-1">作品1</li>
<li data-img="img-2">作品2</li>
<li data-img="img-3">作品3</li>
</ul>
<div class="limg">
<img src="img-1.jpg" alt="作品1">
<img src="img-2.jpg" alt="作品2">
<img src="img-3.jpg" alt="作品3">
</div>
```
你可以使用以下的 JavaScript 代码来实现你的需求:
```js
let liList = document.querySelectorAll('li[data-img]');
let imgList = document.querySelectorAll('.limg img');
liList.forEach(li => {
li.addEventListener('mouseenter', () => {
let imgName = li.dataset.img;
imgList.forEach(img => {
if (img.src.includes(imgName)) {
img.style.display = 'block';
} else {
img.style.display = 'none';
}
});
});
});
```
这段代码会遍历所有带有 `data-img` 属性的 `li` 标签,并为它们添加 `mouseenter` 事件监听器。当鼠标移入某个 `li` 标签时,它的 `data-img` 属性的值会被取出,并用于显示相应的作品图片。如果某个图片的 `src` 属性包含了这个值,那么这个图片将会被显示,否则就隐藏。