Ich habe in meinem HTML ein SVG-Element hinzugefügt. Wenn ein Element einer bestimmten Klasse darüber bewegt wird, möchte ich auch, dass die anderen Elemente der Klasse die Deckkraft ändern.
Ich habe den ganzen Nachmittag nach einer Antwort gesucht, aber ich konnte keine passende Lösung finden.
Das ist jetzt mein Code. Wenn ich über ein Element der Klasse schwebe, ändert nur ein Element die Deckkraft. Ich möchte, dass alle Elemente die Deckkraft ändern. Ich denke, ich sollte es mit JS machen, aber ich kann nicht herausfinden, wie.
<!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>
Antworten:
1 für die Antwort № 1Sie können dies mit dem JQuery-Hover-Ereignis erreichen.
$(document).ready(function () {
$(".itemon").hover(function () { // on mouse enter
$(".itemone").css("opacity", 0.2);
}, function () { // on mouse leave
$(".itemone").css("opacity", 1);
});
});
0 für die Antwort № 2
Nahe an Konruds Lösung, aber ich benutze gerneöfter Unterricht. Warum fragst du? Die Verwendung von Klassen zum Anzeigen und Ausblenden von Material kann die Leistung verbessern. Möchten Sie zum Beispiel Eigenschaften animieren? Anstatt zu verwenden animate, fügen Sie eine Klasse hinzu, die eine transition Eigentum. CSS3 verwendet Hardwarebeschleunigung, während jQuery dies nicht tut - soweit ich weiß.
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 für die Antwort № 3
Ich bin nicht wirklich sicher, was Sie erreichen wollen, aber wenn Sie das gesamte SVG "durchsichtig machen" möchten, können Sie einfach eine Gruppe um sie herum setzen und dort einstellen.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g opacity="0.2">
place your svg here
</g>
</svg>