Eu adicionei um elemento SVG no meu HTML. Quando um elemento de uma determinada classe é passado, também quero que os outros elementos da classe alterem a opacidade.
Procurei uma resposta a tarde toda, mas não consegui encontrar a solução certa.
Este é o meu código agora. Quando eu pairo sobre um elemento da classe, apenas um muda a opacidade. Eu quero que todos os elementos mudem a opacidade. Eu acho que deveria fazê-lo com JS, mas não consigo descobrir como.
<!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>
Respostas:
1 para resposta № 1Você pode conseguir isso usando o evento hover do JQuery.
$(document).ready(function () {
$(".itemon").hover(function () { // on mouse enter
$(".itemone").css("opacity", 0.2);
}, function () { // on mouse leave
$(".itemone").css("opacity", 1);
});
});
0 para resposta № 2
Perto da solução do Konrud, mas eu gosto de usaraulas com mais frequência. Porque você pergunta? Usando classes para mostrar e ocultar coisas pode melhorar o desempenho. Por exemplo, deseja animar propriedades? Ao invés de usar animate, adicione uma classe que tenha transition propriedade. O CSS3 usa aceleração de hardware enquanto o jQuery não "" - até onde eu sei.
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;
}
0 para resposta № 3
Eu não estou realmente certo do que você quer alcançar, mas se você quiser "opacidade" o svg todo você pode simplesmente colocar um grupo em volta dele e colocá-lo lá.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g opacity="0.2">
place your svg here
</g>
</svg>