本文旨在解决在将SVG hover效果集成到HTML card组件中时，hover效果失效的问题。通过分析问题代码，明确了失效原因在于z-index属性的设置。文章提供了修改方案，移除了`.center__div–heartFilled`的`z-index: -1`属性，从而使hover效果能够正常工作。同时，文章也展示了相关的HTML和CSS代码，方便读者理解和实践。
在开发Web应用时，经常会遇到需要在Card组件中添加交互效果的需求，例如，当鼠标悬停在Card的某个元素上时，改变其样式。本文将针对一种常见的问题进行详细讲解：当尝试在Card组件中集成SVG的hover效果时，效果可能无法正常工作。
问题分析
问题的核心在于，当SVG元素被放置在Card组件中，并且使用了z-index属性来控制元素的层叠顺序时，hover效果可能会失效。这通常是因为z-index属性的设置，导致鼠标事件无法正确地被SVG元素捕获。
立即学习“前端免费学习笔记（深入）”；
解决方案
解决这个问题的方法是移除导致hover效果失效的z-index属性。具体来说，我们需要检查CSS代码中，哪个元素设置了z-index: -1，并将其移除。
在提供的代码中，问题的根源在于.center__div–heartFilled元素上可能存在的z-index: -1属性（虽然在提供的CSS代码中没有明确出现，但根据问题描述推测可能存在）。
具体步骤
检查CSS代码： 仔细检查与SVG元素相关的CSS代码，特别是.center__div–heartFilled这个类。移除z-index: -1： 如果找到了z-index: -1的设置，直接将其删除。
修改后的CSS代码示例
.center__div--heartFilled { /* z-index: -1; 移除此行 */}
完整代码示例
下面是完整的HTML和CSS代码，其中已经移除了可能导致问题的z-index属性：
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; 移除此行 */}.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;}
注意事项
确保在移除z-index属性后，SVG元素的层叠顺序仍然符合预期。如果需要调整层叠顺序，可以尝试使用其他的CSS属性，例如position和transform。在复杂的布局中，可能存在其他的CSS属性导致hover效果失效。需要仔细检查代码，并逐步排除问题。
总结
通过移除.center__div–heartFilled元素上的z-index: -1属性，可以解决SVG hover效果在Card组件中失效的问题。在实际开发中，需要仔细分析问题代码，并根据具体情况进行调整。理解CSS的层叠上下文和事件冒泡机制，有助于更好地解决类似的问题。
以上就是解决CSS Hover效果在Card组件中失效的问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1586314.html
微信扫一扫 
支付宝扫一扫 
