将鼠标悬停在使用数据属性的链接上时更改(和淡入/淡出)图像

<a href="#" data-image="path/to/image.jpg">Link</a>
<img id="image" src="path/to/default-image.jpg" alt="Default Image">

CSS代码：
```css
#image {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

JavaScript代码：
```javascript
const link = document.querySelector('a');
const image = document.getElementById('image');

link.addEventListener('mouseover', function() {
  const imageUrl = this.getAttribute('data-image');
  image.src = imageUrl;
  image.style.opacity = 1;
});

link.addEventListener('mouseout', function() {
  image.style.opacity = 0;
});