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

Change opacity elements of whole class

本文关键字：不透明度 元素      更新时间：2023-09-26

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

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

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

接近Konrud的解决方案，但我喜欢更频繁地使用类。你问为什么？使用类来显示和隐藏内容可能会提高性能。例如，要为特性设置动画吗？添加一个具有transition属性的类，而不是使用animate。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;
}

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

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