本教程旨在讲解如何使用 HTML 和 CSS 创建图片和文字联动效果，即当鼠标悬停在图片上时，文字的样式也会随之改变，反之亦然。我们将利用 CSS 的兄弟选择器（sibling selector）实现这一效果，无需使用表格等复杂结构，代码简洁易懂，非常适合初学者。
实现思路
核心在于利用 CSS 的通用兄弟选择器（~）。这个选择器允许我们选择指定元素后的所有兄弟元素。在本例中，我们将图片和文字都包裹在 标签中，并利用兄弟选择器，当 标签（包含图片）被悬停时，改变其后的 .name 类的文字样式。
代码示例
下面是一个完整的 HTML 和 CSS 示例，展示了如何实现图片和文字的联动效果：
图片文字联动示例 a { text-decoration: none; /* 移除链接下划线 */ color: black; /* 默认文字颜色 */ } a:visited { color: black; /* 访问过的链接文字颜色 */ } a:hover { color: #327da8; /* 鼠标悬停时的链接文字颜色 */ } .name { font-size: 20px; font-family: montserrat, sans-serif; /* 使用 sans-serif 作为备选字体 */ position: absolute; margin-top: 360px; text-align: left; border: 1px solid lightgray; padding: 27.5px; border-radius: 0px 0px 15px 15px; } a img { border-radius: 50%; display: block; border: none; } /* 关键代码：当链接（包含图片）被悬停时，改变其后的 .name 类的文字颜色 */ a:hover ~ .name { color: #327da8; }
Breed: Golden
Retriever
Sex: Female
代码解释：
绘蛙
电商场景的AI创作平台，无需高薪聘请商拍和文案团队，使用绘蛙即可低成本、批量创作优质的商拍图、种草文案
175 查看详情
立即学习“前端免费学习笔记（深入）”；
a 标签样式： 定义了链接的默认样式，包括颜色、访问过的颜色和悬停颜色。.name 类样式： 定义了文字的样式，包括字体大小、字体、位置、边框、内边距和圆角。a img 样式： 定义了图片的样式，包括圆角、显示方式和边框。a:hover ~ .name 样式： 这行代码是核心。当鼠标悬停在 标签上时，~ 选择器会选择紧跟其后的 .name 类的元素，并将其文字颜色设置为 #327da8。
注意事项
HTML 结构： 确保图片和文字都在同一个父元素内，并且文字在图片之后，这样兄弟选择器才能正常工作。CSS 优先级： 如果文字的样式没有改变，可能是因为其他 CSS 规则的优先级更高。请检查你的 CSS 代码，确保 a:hover ~ .name 规则的优先级足够高。替代方案： 除了兄弟选择器，还可以使用 JavaScript 来实现类似的效果，但对于简单的联动效果，CSS 方案更加简洁高效。
总结
通过本教程，你学会了如何使用 HTML 和 CSS 的兄弟选择器来实现图片和文字的联动效果。这种方法简单易懂，代码量少，非常适合初学者。你可以根据自己的需求修改代码，创建更丰富的交互效果。记住，理解 CSS 选择器的原理是掌握 CSS 的关键。
以上就是实现图片和文字的联动效果：HTML/CSS 教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/917679.html
微信扫一扫 
支付宝扫一扫 
