悬停链接时，css 声明不起作用

Posted 2023-02-22

【中文标题】悬停链接时，css 声明不起作用

【英文标题】：Upon hovering link, css declaration doesn't work

【发布时间】：2016-11-11 21:09:08

【问题描述】：

我有这个导航链接，在悬停最后一个链接（样式为按钮）时，我希望它在悬停时具有粉红色而不是棕色的底部边框属性，以补充红色按钮。感谢您的帮助。提前致谢！

.header-nav a:hover 
    border-bottom: 5px solid rgb(56,47,50); /*brown border-bottom*/


.header-nav a:last-of-type:hover 
    border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/
 

        <nav class="container header-nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#cupcakes">Cupcakes</a></li>
                <li><a href="#cakes">Cakes</a></li>
                <li><a href="#events">Events</a></li>
                <li><a href="#contacts" class="btn nav-btn">Order Now!</a></li>
            </ul>
            <br>
        </nav>

这是小提琴： https://jsfiddle.net/ssqLspsn/

【问题讨论】：

这个css没问题。请出示您的 html

jsfiddle.net/jbw5qdefcss可能有冲突。

【参考方案1】：

我做到了！！！看这里https://jsfiddle.net/Please_Reply/9hk6okpd/2/希望这是你想要的！！！

.header-nav a:hover 
    border-bottom: 5px solid rgb(56,47,50); /*brown border-bottom*/


.header-nav .btn:hover 
    border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/
 

【讨论】：

对不起，它不起作用。它仅在整个列表项中应用了边框底部，而不是在指定的元素中

抱歉，我不太明白您的要求是什么？我想帮忙，所以请上传图片或提供 JSFiddle

其实你能不能给我们一些代码。如果您愿意，请先编辑任何个人详细信息。

@Ly18 抱歉忘记给你加标签

.header-nav .li:last-child a:hover 就是你要找的东西

【参考方案2】：

也许你会为最后一个 li 输入 id 或类名，并使 css 代码成为特定的 id :)

【讨论】：

我已经这样做了，但它不起作用（应用了相同的属性）。特异性很烂。开玩笑！这里只是一个新手。

【参考方案3】：

在检查悬停时应用了哪个 CSS 时，最好的办法是从控制台激活悬停属性。 您可以通过检查员在 Firefox 和 chrome 中执行此操作。 这是查看如何激活悬停属性的指南 See :hover state in Chrome Developer Tools

至于您的具体问题，如果您也发布了您的 html，这将有所帮助，因为如果您将样式应用于错误的元素，css 将无法正常工作。

.header-nav li:hover 
    border-bottom: 5px solid rgb(56,47,50); /*brown border-bottom*/


.header-nav li:last-of-type:hover 
    border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/
 

祝你好运！

【讨论】：

您好！这是 html sn-p:

【参考方案4】：

尝试为按钮添加一些类（最后一个元素） 你的css很好，虽然

喜欢

<div class="header-nav">
<a>some text</a>
<a>some text</a>
<a class="btn">some text</a>
</div>

css

header-nav .btn:hover 
    border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/

如果你想保留你的css选择器，你应该选择li，而不是a 拉普拉斯.header-nav a:last-of-type:hover 和.header-nav .li:last-child a:hover

【参考方案5】：

我做到了！！！ https://jsfiddle.net/Please_Reply/9hk6okpd/2/希望这是你想要的！！！

.header-nav a:hover 
    border-bottom: 5px solid rgb(56,47,50); /*brown border-bottom*/


.header-nav .btn:hover 
    border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/
 

【讨论】：

耶！祝你好运！请点击勾选接受我的回答，也请随时向我提问@Ly18

谢谢@nobodyshere

不客气！！！ @Ly18：如果您需要我的帮助来尝试回答问题，请记得随时标记我：)