菜单：第一个孩子和：悬停

我有横向菜单，两侧与border-radius。当每个元素处于活动状态时，它具有background-color。我使用:first-child设置第一个元素的背景，但我遇到了:hover的问题。我需要第一个元素悬停在半径上左上角和左下角。此时:hover是基本的矩形。菜单：第一个孩子和：悬停

下面的代码

ul.nav li.current-menu-item:first-child a, ul.nav li.current_page_item:first-child a { 
color: #ffffff; 
background: url(../gfx/menu_hover.gif) left top repeat-x; 
border-top-left-radius:7px; 
border-bottom-left-radius:7px; 
}

来源

2017-07-21 Pat

你可以遵循：悬停的菜单得到的效果如下图所示。

ul.nav li.current-menu-item:first-child a:hover, 
ul.nav li.current_page_item:first-child a:hover

来源

2017-07-21 09:45:57 kmg

我已经尝试过这种方式，但它不起作用。 – Pat

你可以在小提琴中分享代码来检查问题吗？ – kmg

好吧，我删除current_page_item，它的工作原理，但我有问题的角落。我将鼠标悬停为红色以显示它的外观。悬停时有一些黑暗的角落。如何摆脱它们？在屏幕上看到https://s17.postimg.org/kp29ckn27/hover.jpg – Pat

您的代码应该工作，你都这么说，但有更多的问题可能是a标签可以被继承了它的父：

因此，你需要在border-radius规则使用!important ...

ul.nav li.current-menu-item:first-child a, 
ul.nav li.current_page_item:first-child a { 
    color: #ffffff; 
    background: url(../gfx/menu_hover.gif) left top repeat-x; 
    border-top-left-radius: 7px !important;  /* added !important here */ 
    border-bottom-left-radius: 7px !important; 
}

来源

2017-07-21 10:23:15

好的，我删除current_page_item，它的工作原理，但我有问题的角落。我将鼠标悬停为红色以显示它的外观。悬停时有一些黑暗的角落。如何摆脱它们？在屏幕上查看https://s17.postimg.org/kp29ckn27/hover.jpg – Pat

也在'ul.nav'中设置'border-radius：7px;'和'overflow：hidden;'。 –

它几乎可以工作，但悬停时左下角仍然黑暗。 – Pat

菜单：第一个孩子和：悬停

回答

相关问题