Question

我正在尝试在悬停时切换元素中的子类。但我做错了什么......无法弄清楚是什么

假设我在html中有这个svg：

<svg id="toplogo" height="200" width="200" alt="" viewBox="0 0 492.69 617.696">
<circle class="fill" fill="#00bbff" stroke="#000000" stroke-width="32" stroke-miterlimit="10" cx="246.16" cy="222.62" r="206.843"/>
</svg>

这个jquery（内部文件准备好了）：

$("#toplogo").hover(function() {

$(this).children('.fill').toggleClass('hoverfill');

});

这个css：

.hoverfill {
    fill: #ff0000;
}

什么都没发生。填充不会改变

在http://jsfiddle.net/k4djq/1/

上查看

但是当我用

进行测试时它会起作用

$("#toplogo").hover(function() {

$(this).children('.defaultstroke').css("fill","#ff0000");

});

Answer 1

更新

最好使用css来获得悬停/取消悬停效果

<强> Working Demo

#toplogo:hover circle {
    fill: #ff0000;
}

<强> Demo

尝试.attr()，.add/toggleClass()不适用于SVG，

$("#toplogo").hover(function() {

    $(this).children('.fill').attr('class','hoverfill');

});

此外circle的属性为fill，因此您可以使用：

$(this).children('.fill').attr('fill','#ff0000');

Reference ：

jQuery旨在使用HTML DOM（和XML DOM）。然而 SVG DOM略有不同，并非所有jQuery函数都能正常工作正确。

有些插件可以使它工作：

http://keith-wood.name/svg.html#dom

Answer 2

我认为您必须使用attr代替class因为颜色来自at fill

<强> JS

$("#toplogo").on("mouseenter mouseleave", 
             function(e){
                 var color = $("#orgColor").attr("color");
                 if(e.type == "mouseenter"){
                     $(this).children('.fill').attr("fill", "blue");
                 }
                 else if(e.type == "mouseleave"){
                     $(this).children('.fill').attr("fill", color);
                 }

}）;

fiddle

另外，我在你的html中添加一个隐藏的输入来保持原始颜色。检查小提琴。

Answer 3

根据我的经验，每次使用脚本编辑元素的样式时，最好直接尝试从源代码执行。

试试这个：

完全删除该功能，只需添加以下CSS选择器

#toplogo:hover .fill { fill: #ff0000; }

这将完全符合您的要求，无需编写代码。

悬停时jquery toggleClass子项

3 个答案:

更新