Javascript jquery在悬停状态下切换类子级

我正在尝试切换悬停元素中的儿童类。但是我做错了什么。。不知道是什么

假设我有一个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>

这个css：

.hoverfill {
    fill: #ff0000;
}

什么也没发生。填充没有改变

在

但是，当我使用

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

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

});

更新 更好地使用css获得悬停/取消悬停效果

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

---

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

请尝试

.attr（）

，

。add/toggleClass（）

不适用于SVG

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

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

});

此外，

圆

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

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

---

：

jQuery设计用于处理HTMLDOM（和XMLDOM）。然而 SVGDOM略有不同，并非所有jQuery函数都能工作 没错

可以使用一些插件使其工作：

更新 更好地使用css获得悬停/取消悬停效果

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

---

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

请尝试

.attr（）

，

。add/toggleClass（）

不适用于SVG

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

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

});

此外，

圆

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

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

---

：

jQuery设计用于处理HTMLDOM（和XMLDOM）。然而 SVGDOM略有不同，并非所有jQuery函数都能工作 没错

可以使用一些插件使其工作：

---

我认为您必须使用

attr

而不是

class

，因为颜色来自attr

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);
                 }

}))

---

我还在html中添加了一个隐藏的输入，以保持原始颜色。检查小提琴。

我认为你必须使用

attr

而不是

class

，因为颜色来自attr

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);
                 }

}))

---

我还在html中添加了一个隐藏的输入，以保持原始颜色。检查小提琴。

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

试试这个：

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

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

---

这将完全满足您的需要，并且无需编写一些代码。

根据我的经验，每次使用脚本编辑元素的样式时，最好直接从源代码开始编写

试试这个：

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

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

---

---

这将完全满足您的需要，并且不再需要编写一些代码。

不确定为什么它不起作用，但您需要jquery吗。填充：悬停{fill:#ff0000；}嗯，奇怪。这似乎是一个浏览器问题。。不适用于Chrome、Firefox、IE11或Opera。但是狩猎旅行很好。编辑：哦，你编辑了你的评论（或者可能被删除了）@nevermind我试过了。。但是在圆上使用悬停时，悬停点本身似乎是笔划圆（非常窄），而不是整个图像。它必须是整个图像（#toplogo）。有没有办法用css实现这一点？不知道为什么它不起作用，但您需要jquery吗。填充：悬停{fill:#ff0000；}嗯，奇怪。这似乎是一个浏览器问题。。不适用于Chrome、Firefox、IE11或Opera。但是狩猎旅行很好。编辑：哦，你编辑了你的评论（或者可能被删除了）@nevermind我试过了。。但是在圆上使用悬停时，悬停点本身似乎是笔划圆（非常窄），而不是整个图像。它必须是整个图像（#toplogo）。有没有办法用css来实现这一点？如何在不设置的情况下将鼠标悬停到上一个默认值？如何在不设置的情况下将鼠标悬停到上一个默认值？这很有效。到目前为止还不错：）如何取消悬停到以前的默认值，而不设置它？我想这是一个再次删除类hoverfill的问题，不是吗？但是再次删除类在那里不起作用。“我想你必须设置它。”莫格利在更新了你的问题后，检查了我的答案。更新工作正常的部分。。但问题是。。我真正的标志有多个元素，不仅仅是圆圈在悬停时必须改变。单独使用css可能吗？也许我应该使用jquery。。并检索元素上的默认颜色值，然后将其设置为一个hover:out这正在工作。到目前为止还不错：）如何取消悬停到以前的默认值，而不设置它？我想这是一个再次删除类hoverfill的问题，不是吗？但是再次删除类在那里不起作用。“我想你必须设置它。”莫格利在更新了你的问题后，检查了我的答案。更新工作正常的部分。。但问题是。。我真正的标志有多个元素，不仅仅是圆圈在悬停时必须改变。单独使用css可能吗？也许我应该使用jquery。。并检索元素上的默认颜色值，然后将其设置为一个悬停：Out我可以使用此选项针对多个元素吗？是。您只受选择器选项的限制，即使不使用新的CSS3选项，您仍然有很多选项。这也是正确的答案，但不能接受多个选项。谢谢我用这个瞄准多个元素？是的。您只受选择器选项的限制，即使不使用新的CSS3选项，您仍然有很多选项。这也是正确的答案，但不能接受多个选项。谢谢