更改整个班级的不透明度元素答案

【问题标题】：Change opacity elements of whole class更改整个班级的不透明度元素
【发布时间】：2015-03-19 13:45:11
【问题描述】：

我在我的 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>

【问题讨论】：

他们都有.itemone这个类吗？

标签： javascript css svg hover

【解决方案1】：

您可以使用 JQuery 悬停事件来实现这一点。

    $(document).ready(function () {

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

});

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案3】：

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

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

【讨论】：