鼠标悬停图片显示文字
时间: 2024-06-13 08:07:47 浏览: 16
要实现鼠标悬停图片显示文字,可以使用HTML和CSS。具体步骤如下:
1. 首先,在HTML中创建一个包含图像和字幕的元素,可以使用<div>元素来包含它们。
```html
<div class="image-container">
<img src="your-image.jpg" alt="Your Image">
<div class="caption">这里是字幕</div>
</div>
```
2. 接下来,在CSS中设置图像和字幕的样式,并将字幕的初始状态设置为隐藏。
```css
.image-container {
position: relative;
display: inline-block;
}
.caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 18px;
padding: 10px;
text-align: center;
opacity: 0;
transition: opacity 0.5s;
}
.image-container:hover .caption {
opacity: 1;
}
```
3. 最后,将HTML和CSS保存为一个HTML文件,并在浏览器中打开该文件,当鼠标悬停在图像上时,字幕会显示出来。
相关问题
js 鼠标悬停图片显示文字
您可以使用 HTML 的 title 属性结合 JavaScript 来实现鼠标悬停图片显示文字。具体做法是在需要显示文字的图片上添加 title 属性,然后使用 JavaScript 监听鼠标悬停事件,在事件触发时获取图片的 title 属性值,并在页面上显示出来。
以下是一个简单的示例:
```html
<img src="example.jpg" title="这是一个示例图片" onmouseover="showTitle(event)">
<div id="title-box"></div>
<script>
function showTitle(event) {
// 获取图片的 title 属性值
var title = event.target.title;
// 显示 title 值
var titleBox = document.getElementById("title-box");
titleBox.innerHTML = title;
}
</script>
```
在这个例子中,当鼠标悬停在图片上时,会触发 showTitle 函数,该函数会从事件对象中获取图片的 title 属性值,并将其显示在页面中 id 为 title-box 的元素内。您也可以根据需要自定义显示效果和位置等。
html5 鼠标悬停图片显示文字
您可以通过以下 HTML 代码实现鼠标悬停图片显示文字效果:
```
<!DOCTYPE html>
<html>
<head>
<title>鼠标悬停图片显示文字</title>
<style>
.container {
position: relative;
display: inline-block;
}
.container img {
display: block;
width: 100%;
height: auto;
}
.container .text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.5s;
}
.container:hover .text {
opacity: 1;
}
</style>
</head>
<body>
<div class="container">
<img src="your-image-url" alt="your-image-description">
<div class="text">
<p>Your text here</p>
</div>
</div>
</body>
</html>
```
其中,通过创建一个 `.container` 容器来包含图片和文字,使用相对定位和 `transform` 属性来让文字垂直居中显示在图片上方。通过给 `.container` 和 `img` 元素设置 `display: inline-block` 和 `width: 100%`,来让容器和图片宽度自适应。使用 `opacity` 属性来控制文字的显示和隐藏,并使用 `transition` 属性来实现平滑过渡。您只需要将 `your-image-url` 替换为您自己的图片链接,`your-image-description` 替换为您自己的图片描述,`Your text here` 替换为您自己的文字即可。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)