存在 SVG 时 CSS 选择器无法按预期工作答案

【问题标题】：CSS Selector not working as expected when SVG present存在 SVG 时 CSS 选择器无法按预期工作
【发布时间】：2013-10-27 19:42:09
【问题描述】：

我有这个运行良好的 JS Fiddle，使我的自定义标题在鼠标悬停时显示并在鼠标悬停时隐藏。将它传输到现实世界环境时遇到的问题是 ~ 波浪号选择器不再起作用。还有另一种方法可以做到这一点吗？我的 .message div 位于页面的最后（因为我必须先关闭 SVG 标签），所以我知道 + plus 选择器不起作用。

我意识到，与小提琴相反，我的网页上真正的问题是我的按钮类项目是 svg 元素，如果两个元素不是 svg，波浪号定位可以正常工作，如果一个元素不能正常工作是 svg，另一个不是。

我在 Fiddle 中添加了同一个类“按钮”的 svg 元素来演示这个问题。如果有人能告诉我如何正确定位它，我将不胜感激。

JS Fiddle Here

.button:hover ~ .message {
    opacity: 1;
    transition: opacity .6s ease-in;
    -moz-transition: opacity .6s ease-in;
    -webkit-transition: opacity .6s ease-in;
}

【问题讨论】：

“选择器不再起作用”你是什么意思？否则它会起作用。
它在小提琴上工作正常，但如果我复制并粘贴到我的网页上它就不起作用了。
CSS 不是问题，是 JS。网站上有 jQuery 吗？很确定这是你的问题。
~ 仅适用于兄弟姐妹。您可能已经意识到这一点。所以答案是否定的，除非你可以将这些元素并排放置，否则纯 CSS 没有解决方案，你需要额外的 JS
限制在 CSS 规范中引用。 p~ul -> Selects every <ul> element that are preceded by a <p> element

标签： css svg css-selectors

【解决方案1】：

我错过了什么吗？您是否有理由不能将class="button" 应用于 SVG？它似乎达到了你所追求的目标。

Demo here

更新

与其尝试使用纯 CSS 来实现消息显示，不如使用一点额外的 jQuery。将鼠标悬停在“按钮”上时向消息元素添加一个类。

$('.message').addClass("visible-message");

然后在鼠标移出时再次将其删除。

Demo here

【讨论】：

没有。这是不可接受的，因为不是我的 svg 中的每个元素都是一个按钮，就像它在 Fiddle 中一样。
我觉得这很有趣，甚至完全有效。有没有办法选择孩子也许也可以？类似于：svg>rect[class="button"]:hover ~ .message
这种选择器有效，但仍然不正确。它不是专门针对班级的！ svg:nth-child(n):hover ~ .message 你可以在我更新后的原始帖子中看到它。
我已经有一个可以运行的 javascript 版本，但它没有你的那么优雅。如果我将鼠标悬停太快，有时会显示标题。您的版本也包含 CSS，虽然我想要一个纯 CSS 答案，但为了避免我遇到的问题，您的答案确实消除了这个问题。我看到 SVG 仍然有一些严重的缺点，因为它不能很好地与其他人一起使用。我会接受这个更新的答案并奖励你赏金。谢谢先生的坚持。
这不是 SVG 的错。如果其中一个按钮 div 在另一个 div 中，您也会遇到同样的问题。