悬停时li元素上的嵌套css样式[重复]答案

【问题标题】：nested css style on li element on hover [duplicate]悬停时li元素上的嵌套css样式[重复]
【发布时间】：2013-02-22 13:06:24
【问题描述】：

我的标记是这样的。

<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 以在选定的类中添加一个类。因此，当用户将鼠标悬停在链接上（此处为购买链接）时，标记变为这样

<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 实现吗？嘿，我仍然在寻找答案......

【问题讨论】：

stackoverflow.com/questions/2000582/…
也许在 CSS4 中。 :) stackoverflow.com/questions/1014861/…
既然您使用 jQuery 添加 selected 类，为什么不直接将该类添加到被悬停的 a 的父级。然后，您可以将悬停样式保留在其所属的样式表中，而不是保留在难以找到的 javascript 中。
将selected 类放在li 上，而不是a。从 jQuery 应用 CSS 的任何其他解决方案只会导致痛苦和痛苦。（即使答案似乎会引导你走向这个……）
CSS 可以在没有 jQuery 的情况下使用 :hover 伪类来处理这个问题

标签： jquery html css css-selectors

【解决方案1】：

要给li 加上边框，在调用addClass 之后，只需执行以下操作：

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

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

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

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

【讨论】：

我想给边框 li 元素而不是 ...
@NewBie 那你就不行了。只需将a 设为 100% 宽度/高度
@NewBie 检查我的编辑，你可以在 jQuery 中做到这一点。
你可以。 li a.selected 为 li 提供了具有 a 的更改，其中类已选择
对 :) 抱歉。 a.selected

【解决方案2】：

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

$('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.

【讨论】：

【解决方案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。

【讨论】：