Я додав у свій 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>
Відповіді:
1 для відповіді № 1Ви можете досягти цього, використовуючи подію наведення JQuery.
$(document).ready(function () {
$(".itemon").hover(function () { // on mouse enter
$(".itemone").css("opacity", 0.2);
}, function () { // on mouse leave
$(".itemone").css("opacity", 1);
});
});
0 для відповіді № 2
Близький до рішення Конруда, але я люблю використовуватизаняття частіше. Чому ти питаєш? Використання класів для показу та приховування речей може підвищити продуктивність. Наприклад, хочете анімувати властивості? Замість використання animate, додайте клас, у якому є transition майно. CSS3 використовує апаратне прискорення, тоді як jQuery не "t - наскільки я знаю.
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 для відповіді № 3
Я не дуже впевнений, що ви хочете досягти, але якщо ви хочете "непрозорість" всього svg, ви можете просто поставити навколо нього групу і встановити її там.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g opacity="0.2">
place your svg here
</g>
</svg>