javascript - 鼠标悬停图像到具有透明背景的文本

标签 javascript html css

我用 Javascript 的工作不多,但我对如何将图像翻转到另一个图像有一个粗略的了解。我正在尝试制作一个图像,当鼠标悬停在该图像上时,该图像将成为文本 block 的透明背景,该文本 block 将占据图像所占的空间。我看过很多教程,但没有一个能与之相提并论。

还有:有什么方法可以用 css 或其他方式来格式化这个文本吗? (比如加padding,换行等)

任何帮助或指向我可以弄清楚的网站的链接将不胜感激!谢谢!

最佳答案

fiddle是一个纯 css 实现,它改变了悬停在文本前面的图像的不透明度。为此,我将文本和图像容器都放在一个容器 div 中,并设置 position: absolute 以便它们重叠。然后,我使用 :hover 选择器更改图像的不透明度。由于文字在图像后面,因此无法选择。让我知道这是否是您要找的东西,如果不是,请指定您想要的不同:)

关于javascript - 鼠标悬停图像到具有透明背景的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15914415/

相关文章:

css - 大 CSS Sprite 图像(在低 CPU 计算机上运行缓慢)

javascript - Mongoose:需要验证错误路径

html - 添加了滚动条,但元素未填满页面

html - CSS 网格内容居中

javascript - 为什么这个 jQuery 图像映射在 WordPress 上不起作用

javascript - 将任意数量的具有不同宽度的元素对齐到带有环绕的网格

php - 如何通过基于PHONEGAP的电子商务移动应用程序访问apache服务器上的php文件?

javascript - 覆盖发布请求

javascript - Redux 的行为不正确

javascript - 尝试将 JS 变量分配给隐藏字段时卡住了