jquery - 悬停时 li 元素上的嵌套 css 样式

Question

<分区>

Answer 1

当您根据其后代的类名设置元素的父级样式时:

$('a.selected').closest('li').css('border-top','1px solid #000');

JS Fiddle demo .

或者，稍微好一点，因为它删除了边框(假设这可能用于鼠标悬停/鼠标悬停):

$('a.selected').closest('li').hover(function(){
    $(this).css('border-top','1px solid #000');
},function(){
    $(this).css('border-top-width','0');
});

JS Fiddle demo .

样式的纯 JavaScript 选项:

var selected = document.querySelector('a.selected');
selected.parentNode.style.borderTop = '1px solid #000';

JS Fiddle demo .

var selected = document.getElementsByClassName('selected')[0];
selected.parentNode.style.borderTop = '1px solid #000';

JS Fiddle demo .

一个改进的替代方案，使用 jQuery 的 hover() 方法和 addClass() 而不是直接操作元素的内联样式:

$('a.selected').closest('li').hover(function(){
    $(this).addClass('activeParent');
},function(){
    $(this).removeClass('activeParent');
});

以及以下 CSS:

li {
    /* to prevent jumping down of the li when the border is shown */
    border-top: 1px solid transparent;
}
.activeParent {
    border-top-color: #000;
}

JS Fiddle demo .