css 鼠标放在图片上出字

如果你想让你的网页更加生动有趣，那么你可以使用CSS的鼠标hover属性实现鼠标放在图片上出字的效果。这种效果可以让你的网站更加有活力。

首先，你需要在HTML文件中插入一张图片：

<img src="your_image.jpg" alt="your image" />

然后，在CSS文件中，你需要定义该图片的鼠标hover属性。你可以指定该属性的值为任何你想要显示的文本。在这个例子中，我们将显示“hello world”这个单词。

img:hover::after {
    content: "hello world";
}

在这段代码中，我们使用:hover选择器来选择在鼠标放在图片上时应用这个样式。使用::after伪元素来插入一段文本。使用content属性来定义要显示的文本内容。

如果你想调整这段文本的样式，你可以使用其他CSS属性，例如：

img:hover::after {
    content: "hello world";
    color: #fff;
    background-color: #000;
    font-size: 16px;
    padding: 5px;
    border-radius: 5px;
}

在这段代码中，我们修改了字体颜色、背景颜色、字体大小、内边距和边框半径等属性。

现在，当你将鼠标放在该图片上时，将会出现“hello world”这段文本。