0

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

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

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

JS小提琴在这里

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

1 回答 1

1

我错过了什么吗？您是否有理由不能只申请class="button"SVG？它似乎实现了你所追求的。

演示在这里

更新

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

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

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

演示在这里

于 2013-10-26T10:49:46.263 回答