本文旨在解决在HTML Card组件中集成SVG时，Hover效果失效的问题。通过分析问题代码，确定了`z-index`属性是导致Hover效果失效的根本原因，并提供了详细的解决方案，帮助开发者在Card组件中正确实现SVG的Hover效果。
在网页开发中，我们经常需要在Card组件中添加一些交互元素，例如SVG图标，并为其添加Hover效果以增强用户体验。然而，有时我们会遇到这样的问题：在独立的SVG元素上，Hover效果工作正常，但将其集成到Card组件中后，Hover效果却失效了。本文将深入探讨这个问题的原因，并提供详细的解决方案。
问题分析
根据提供的信息，问题的关键在于，当SVG元素被放置在Card组件中时，.card__heart:hover .svg__heart–filled选择器无法正确触发。这通常是由于CSS层叠、定位或z-index等因素引起的。
立即学习“前端免费学习笔记（深入）”；
解决方案
经过分析，问题代码中z-index:-1 属性是导致Hover效果失效的根本原因。当.center__div–heartFilled元素设置了z-index:-1时，它会被放置在其他元素的下方，从而无法接收到Hover事件。
移除z-index:-1
解决这个问题最直接的方法就是从.center__div–heartFilled类中移除z-index:-1属性。
修改后的CSS代码如下：
.center__div--heartFilled { /* z-index: -1; Remove this line */}
完整代码示例
以下是完整的HTML和CSS代码示例，展示了如何在Card组件中正确实现SVG的Hover效果：
HTML:
CSS:
body { background: black;}body a { text-decoration: none; color: black;}.card { width: 90%; height: 225px; margin-bottom: 25px; border-radius: 15px; overflow: hidden;}.card__image { height: 160px;}.card__image img { width: 100%; height: 100%; object-fit: cover;}.card__body { height: 65px; width: 100%; display: flex; align-items: center; flex-flow: row wrap; justify-content: space-between; background: white;}.card__title { padding-left: 15px; display: flex; flex-flow: column wrap; gap: 3px;}.card__title h3 { margin-top: 0px; margin-bottom: 0px;}.card__title p { margin-top: 0px; margin-bottom: 0px;}.card__heart { margin-right: 40px; border: solid black 1px; position: relative; display: flex; justify-content: center; align-items: center; width: 32px; height: 32px;}/* styliser les svg heart */.center__div { width: 32px; height: 32px; position: absolute; cursor: pointer;}.center__div--heartFilled { /* z-index: -1; Remove this line */}.svg__heart--filled { opacity: 0; transition: all 500ms ease-in-out;}.card__heart:hover .svg__heart--filled { opacity: 1;}/*..svg__heart--filled { opacity: 1;}*/.svg__heart--outline { background: rgba(0, 0, 0, 0);}.color-primary { stop-color: yellow; stop-opacity: 1;}.color-secondary { stop-color: red; stop-opacity: 1;}
注意事项
确保CSS选择器的优先级正确。如果其他CSS规则覆盖了.card__heart:hover .svg__heart–filled的样式，Hover效果可能仍然无法生效。检查父元素的overflow属性。如果父元素设置了overflow: hidden或overflow: auto，可能会影响子元素的Hover效果。在复杂的布局中，可能需要使用position: relative和z-index来管理元素的层叠顺序，确保Hover元素位于最上层。
总结
当SVG的Hover效果在独立元素中有效，但在Card组件中失效时，通常是由于CSS层叠、定位或z-index等因素引起的。通过移除不必要的z-index属性，并确保CSS选择器的优先级正确，可以解决这个问题，并在Card组件中正确实现SVG的Hover效果。在实际开发中，需要仔细分析问题的具体情况，并根据需要调整CSS代码，才能达到最佳效果。
以上就是解决CSS Hover效果在独立SVG中有效，但在Card组件中失效的问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1586192.html
微信扫一扫 
支付宝扫一扫 
