html鼠标放在图片显示文字

在HTML中，鼠标放在图片上显示文字通常有两种方法：

1. 使用`<img>`标签的`title`属性：这是一种简单的方式，当用户将鼠标指针悬停在图片上时，浏览器会显示一个包含`title`属性值的工具提示。例如：

<img src="image.jpg" title="这是一个图片描述">

当鼠标悬停在`image.jpg`上时，会显示文字“这是一个图片描述”。

2. 使用CSS和HTML结合`<span>`或`<div>`标签以及伪类`:hover`来显示描述文字：这种方法可以让文字以更灵活的方式显示，例如在图片上方或周围。示例如下：

<div class="image-container">
    <img src="image.jpg">
    <span class="image-description">这是一个图片描述</span>
</div>

.image-container {
    position: relative;
}

.image-description {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    width: 100%;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s ease;
}

.image-container:hover .image-description {
    visibility: visible;
    opacity: 1;
}

在这个例子中，当鼠标悬停在图片上时，`.image-description`的可见性和透明度被改变，从而显示文字。