js创建一个鼠标悬停时显示图片标题的效果

你可以通过使用JavaScript和CSS来实现鼠标悬停时显示图片标题的效果。

首先，在HTML中添加一个包含图像和标题的元素。

在CSS中定义图像容器和标题的样式，以及标题的初始隐藏状态。例如：

css
.image-container {
position: relative;
display: inline-block;
}

.image-title {
display: none;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 5px;
text-align: center;
}

最后，在JavaScript中添加事件监听器，以在鼠标悬停时显示标题。例如：

javascript
const imageContainer = document.querySelector('.image-container');
const imageTitle = document.querySelector('.image-title');

imageContainer.addEventListener('mouseenter', () => {
imageTitle.style.display = 'block';
});

imageContainer.addEventListener('mouseleave', () => {
imageTitle.style.display = 'none';
});

以上代码将在鼠标悬停时显示标题，鼠标移开时隐藏标题。你可以根据需要进一步自定义样式和效果。