我正在尝试将鼠标悬停在元素中以切换孩子的课堂。但是我做错了..无法弄清楚是什么
假设我在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");
});
更好地使用CSS来获得悬停/悬停效果
#toplogo:hover circle {
fill: #ff0000;
}
试试看.attr()，.add/toggleClass()不适用于SVG，
$("#toplogo").hover(function() {
$(this).children('.fill').attr('class','hoverfill');
});
还有circlehas属性作为fill，因此您可以使用：
$(this).children('.fill').attr('fill','#ff0000');
参考：
jQuery旨在与HTML DOM（和XML DOM）一起使用。但是，SVG DOM略有不同，并且并非所有jQuery函数都能正常工作。
一些插件可以使它工作：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句