更改整个 class 的不透明元素

Question

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

我找了一个下午的答案，但找不到合适的解决方案。

这是我现在的代码。当我将鼠标悬停在 class 的一个元素上时，只有一个元素会改变不透明度。我希望所有元素都改变不透明度。我想我应该用 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 的解决方案，但我更喜欢使用 classes。你为什么问？使用 classes 来显示和隐藏内容可能会提高性能。例如，想要动画属性？不要使用 animate，而是添加具有 transition 属性的 class。 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

我不太确定你想要实现什么，但是如果你想 "opacity" 整个 svg 你可以简单地在它周围放一个组并将它放在那里。

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

更改整个 class 的不透明元素

Change opacity elements of whole class

javascript

css

svg

hover