css实现当鼠标停留在图片时显示文字 谢谢！

Posted 2023-05-09

<img src="xxx.jpg" alt="要显示的文字">
在img标签里写alt属性，alt里的内容就是当鼠标停留在图片时显示的内容。
希望对你有帮助！追问

可以用css实现吗？

追答

如果用css代替，先写一段css代码（其中.logo为类选择器）：
h1.main-logo
width: 300px; height: 50px;
background: url(images/logo.jpg);
text-indent: -9999px;

你在网页中调用css，代码就如下：

Logo name
抱歉我跑题了，这样同是实现alt或title描述或简介的目的，但是不会出现鼠标放上去有文字出现的效果。
css能实现，我再研究研究或者a的hover状态可以。稍后告诉你……

参考技术A 楼上的答案有误，alt是图片加载失败时替代的说明文字。鼠标停留应该是是title属性。例：
<img src="xxx.jpg" title="显示的文字" />
你可以动手试试。 参考技术B 不用css就可以实现，每个标签都含有title属性，<img src="xxx.jpg" title="楼主是头猪儿" />

css3 实现鼠标放上去图片外框不变大，里面中心放大

参考技术A 在前端开发过程中，要求实现背景色透明度0.8，但是文字颜色要求按给定颜色设置。

如果直接设置背景opacity值为0.8，会使文字的颜色发生改变。解决方法就是在设置背景色时使用rgba(red,green,blue,opacity)来对背景色进行设置,这样就可以单独的改变背景的透明度，而不会影响到里面的内容(包括文字和图片)。
web前端超出两行用省略号表示

效果图：

layui/js/jquery图片切换.html文件

layui/js/jquery图片切换.js文件