当SVG出现时，CSS Selector无法正常工作

Question

我有这个JS Fiddle运行良好，在鼠标悬停时显示我的自定义标题并隐藏在mouseout上。 我将它运送到真实环境时遇到的问题是〜代码选择器不再工作了。还有另一种方法吗？我的.message div位于页面末尾（因为我必须先关闭SVG标签），所以我知道+ plus选择器不起作用。

我意识到我的网页上的真正问题与小提琴不同的是我的按钮类项目是svg元素，而如果两个元素都是非svg，则波形符合定位工作正常，如果一个元素，则它无法正常工作是svg而另一个不是。

我向小提琴添加了同一类“按钮”的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;
}

Answer 1

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

Demo here

<强>更新

不要试图用纯CSS实现消息显示，而是使用一些额外的jQuery。将鼠标悬停在“按钮”上时，将一个类添加到消息元素中。

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

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

Demo here