Question

我在HTML中添加了一个SVG元素。当某个类的一个元素悬停在上面时，我也希望该类的其他元素改变不透明度。

我整个下午都在寻找答案，但我无法找到合适的解决方案。

这是我现在的代码。当我将鼠标悬停在类的一个元素上时，只有一个元素会改变不透明度。我希望所有元素都能改变不透明度。我想我应该用JS来做，但我无法弄清楚如何。

<!doctype html>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$.get('grafieken.svg', function (data) {
$(document.body) .append(data.documentElement);
init();
});
function init(){
}
</script>
<style>

.itemone:hover
{
    opacity:0.2;
}
</style>

Answer 1

您可以使用JQuery悬停事件来实现此目的。

    $(document).ready(function () {

    $(".itemon").hover(function () { // on mouse enter
        $(".itemone").css("opacity", 0.2);
    }, function () { // on mouse leave
        $(".itemone").css("opacity", 1);
    });

});

Answer 2

关闭Konrud的解决方案，但我更喜欢使用类。你为什么问？使用类来显示和隐藏内容可能会提高性能。例如，想要动画属性？不要使用animate，而是添加具有transition属性的类。 CSS3使用硬件加速，而jQuery则没有 - 据我所知。

https://jsfiddle.net/quk9tpa8/3/

<强>的jQuery

$("div").hover(function () {
    var hoverClass = $(this).attr("class");
    $("." + hoverClass).addClass("hover");
},
function () {
    $(".hover").removeClass("hover");
});

<强> CSS

div.hover {
    opacity: 0.2;
}

Answer 3

我不确定你想要达到什么目标，但是如果你想要“不透明”整个svg，你可以简单地在它周围放一组并将其设置在那里。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <g opacity="0.2">
       place your svg here   
    </g>
</svg>

更改整个类的不透明度元素

3 个答案: