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

Posted 2023-03-06

【中文标题】悬停时li元素上的嵌套css样式[重复]

【英文标题】：nested css style on li element on hover [duplicate]

【发布时间】：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 实现吗？嘿，我仍然在寻找答案......

【问题讨论】：

***.com/questions/2000582/…

也许在 CSS4 中。 :) ***.com/questions/1014861/…

既然您使用 jQuery 添加 selected 类，为什么不直接将该类添加到被悬停的 a 的父级。然后，您可以将悬停样式保留在其所属的样式表中，而不是保留在难以找到的 javascript 中。

将selected 类放在li 上，而不是a。从 jQuery 应用 CSS 的任何其他解决方案只会导致痛苦和痛苦。 （即使答案似乎会引导你走向这个……）

CSS 可以在没有 jQuery 的情况下使用 :hover 伪类来处理这个问题

【参考方案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。