当我将鼠标悬停在一个圆环上时,我希望圆环悬停并且它下面的所有圆环也被着色。例如:如果我将鼠标悬停在 ring_two_fill_1 上,我希望 ring_one_fill_1 和 ring_two_fill_1 一样被填充。我正在制作一个进度图,显示您所处的级别。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="615.7px"
height="621px" viewBox="0 0 615.7 621" enable-background="new 0 0 615.7 621" xml:space="preserve">
<g id="level_one">
<path id="ring_three_fill_1" class="ring-fill"/>
<path id="ring_two_fill_1" class="ring-fill"/>
<path id="ring_one_fill_1" class="ring-fill"/>
</g>
</svg>
最佳答案
是的,您基本上必须最终使用 next() 方法。下面是一个简单列表的此类功能示例:
HTML:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
CSS:
ul {
list-style: none;
width: 50%;
text-align: center;
}
ul li {
padding: 10px;
margin: 2px 0;
background-color: lightpink;
}
ul li.active {
background-color: lightgreen;
}
jQuery:
var lis = $('li');
function hoverIn () {
$(this).addClass("active");
if($(this).next().length != 0) {
hoverIn.call($(this).next(), null);
} else {
return;
}
}
function hoverOut () {
lis.removeClass("active");
}
lis.on("mouseenter", hoverIn);
lis.on("mouseleave", hoverOut);
关于javascript - 如何只选择 DOM 中元素之前的 sibling ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34051152/