Question

我的标记是这样的。

<div id="chromemenu" class="chromestyle">
  <ul>
    <li><a rel="dropmenu1" href="#" class="">Buy</a></li>
    <li><a rel="dropmenu2" href="#" class="">Sell</a></li>
    <li><a rel="dropmenu3" href="#" class="">Community</a></li>
    <li><a rel="dropmenu6" href="#" class="">Languages</a></li>
    <li><a rel="dropmenu4" href="#" class="">My Account</a></li>
  </ul>
</div>

现在我已经将jQuery添加到所选类中。因此，当用户悬停在alink上时（在Buy链接上），标记就像这样

<div id="chromemenu" class="chromestyle">
  <ul>
    <li><a rel="dropmenu1" href="#" class="selected">Buy</a></li>
    <li><a rel="dropmenu2" href="#" class="">Sell</a></li>
    <li><a rel="dropmenu3" href="#" class="">Community</a></li>
    <li><a rel="dropmenu6" href="#" class="">Languages</a></li>
    <li><a rel="dropmenu4" href="#" class="">My Account</a></li>
  </ul>
</div>

现在我想给样式只选择一个类的li。我对li的风格是给li元素边框。有人能告诉我怎么做吗？任何帮助和建议都会非常明显。感谢....

更新我想为我的li元素而不是a提供边框，所以请在那个领域帮助我。这可以通过简单的css来实现吗？嘿，我仍然是答案......

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

Answer 2

在致电li后，要给addClass边框，请执行以下操作：

$("a.selected").parent().css("border", "1px solid #000");

然后在取消选择时，您可以简单地删除它：

$("a:not(.selected)").parent().css("border", "none");

小提琴：http://jsfiddle.net/BMTAE/

Answer 3

我意识到这可能不是你想要的答案，但无论如何我都会给它。

您已经在使用jQuery将selected类添加到a标记中;可能使用类似的东西：

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

如果您将其更改为：

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

您将该类添加到父li，然后可以使用

li {border: 1px solid black;}

或

.chromestyle li {border: 1px solid black;}

设置li。

的样式这样做的主要好处是你可以将你的CSS完全保存在样式表中，以便代码的未来维护者能够轻松找到它而不是在你的javascript文件中查找悬停事件处理程序。

添加parent()可能会略微降低速度，但是任何其他解决方案都需要使用jQuery将CSS添加到父级，所以整体上应该有一个速度提升，因为CSS的内容将由浏览器而不是javascript。

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

3 个答案: