如何使悬停使用边界半径的第一个孩子

我正在一个小网站上工作，我有一个菜单边框半径设置为10px。我在如何让悬停只在第一个和最后一个孩子上使用边界半径时遇到问题。有人可以解释我做错了什么？如何使悬停使用边界半径的第一个孩子

<div class="menu"> 
     <ul> 
     <li><a href="#">Link 1 </a></li> 
     <li><a href="#">Link 2 </a></li> 
     <li><a href="#">Link 3 </a></li> 
     <li><a href="#">Link 4 </a></li> 
     <li><a href="#">Link 5 </a></li> 
     </ul> 
    </div>

CSS：

.menu ul 
{ 
    background: #ede0b3; 
    width: 200px; 
    box-shadow: 1px 1px 1px 1px grey; 
    border-radius: 10px; 
    margin-left: 5px; 
} 

.menu ul li 
{ 
    list-style: none; 
    border-bottom: 1px solid grey; 
} 

.menu ul li a 
{ 
    padding: 10px 15px; 
    display: block; 
    color: black; 
    font-weight: bold; 
    text-decoration: none; 
} 

.menu ul li:last-child 
{ 
    border-bottom: none; 

} 

.menu ul li a:hover 
{ 
    background: white; 
} 

.menu li a:first-child:hover 
{ 
    border-radius: 10px; 
}

演示：https://jsfiddle.net/vaydrvcr/

来源

2016-07-31 Pedro

这里，是更新小提琴。 https://jsfiddle.net/vaydrvcr/1/

你是对的，只是你错过了那个a永远是li的第一个孩子。你是第一个李的主播。

来源

2016-07-31 06:26:05 ankitjain11

谢谢兄弟，正是我要找的 – Pedro

用户界面还不干净，如果你将鼠标悬停在最后一个项目上，那么白色的角落就会出现在主界面。 –

@ShashankAgrawal我想，这是一个非常多的测试案例。所以，我们可以放弃UI：p – ankitjain11

试试这个，你必须针对你的li元素而不是a标签。

.menu ul 
 
{ 
 
\t background: #ede0b3; 
 
\t width: 200px; 
 
\t box-shadow: 1px 1px 1px 1px grey; 
 
\t border-radius: 10px; 
 
\t margin-left: 5px; 
 
} 
 

 
.menu ul li 
 
{ 
 
\t list-style: none; 
 
\t border-bottom: 1px solid grey; 
 
} 
 

 
.menu ul li a 
 
{ 
 
\t padding: 10px 15px; 
 
\t display: block; 
 
\t color: black; 
 
\t font-weight: bold; 
 
\t text-decoration: none; 
 
} 
 

 
.menu ul li:last-child 
 
{ 
 
\t border-bottom: none; 
 

 
} 
 

 
.menu li:first-child a:hover{ 
 
\t border-radius: 10px; 
 
    background:#fff; 
 
} 
 

 
.menu li:last-child a:hover{ 
 
\t border-radius: 10px; 
 
    background:#fff; 
 
}

<div class="menu"> 
 
     <ul> 
 
     <li><a href="#">Link 1 </a></li> 
 
     <li><a href="#">Link 2 </a></li> 
 
     <li><a href="#">Link 3 </a></li> 
 
     <li><a href="#">Link 4 </a></li> 
 
     <li><a href="#">Link 5 </a></li> 
 
     </ul> 
 
    </div>

来源

2016-07-31 06:29:01 frnt

使用此方法

.menu ul 
 
{ 
 
\t background: #ccc; 
 
\t width: 200px; 
 
\t box-shadow: 1px 1px 1px 1px grey; 
 
\t border-radius: 10px; 
 
\t margin-left: 5px; 
 
} 
 

 
.menu ul li 
 
{ 
 
\t list-style: none; 
 
\t border-bottom: 1px solid grey; 
 
} 
 

 
.menu ul li a 
 
{ 
 
\t padding: 10px 15px; 
 
\t display: block; 
 
\t color: black; 
 
\t font-weight: bold; 
 
\t text-decoration: none; 
 
} 
 

 
.menu ul li:last-child 
 
{ 
 
\t border-bottom: none; 
 

 
} 
 

 
.menu li:first-child a:hover{ 
 
\t border-radius: 10px; 
 
    background:#fff; 
 
} 
 

 
.menu li:last-child a:hover{ 
 
\t border-radius: 10px; 
 
    background:#fff; 
 
}

<div class="menu"> 
 
     <ul> 
 
     <li><a href="#">Link 1 </a></li> 
 
     <li><a href="#">Link 2 </a></li> 
 
     <li><a href="#">Link 3 </a></li> 
 
     <li><a href="#">Link 4 </a></li> 
 
     <li><a href="#">Link 5 </a></li> 
 
     </ul> 
 
    </div>

块引用

来源

2016-07-31 06:34:05

你面临的问题是因为你有li-first-child的border-radius属性，因为每个li标签都有单个元素，这就是为什么它会影响你的整个元素。

CSS

.menu li:first-child:hover a 
{ 
    border-radius:10px; 
}

希望这能够解决您的问题.. https://jsfiddle.net/xdn80b9f/1/

来源

2016-07-31 06:34:37 Abhishek

在这里你去：

.menu ul { 
 
    background: #ede0b3; 
 
    width: 200px; 
 
    box-shadow: 1px 1px 1px 1px grey; 
 
    border-radius: 10px; 
 
    margin-left: 5px; 
 
    padding-left: 0; 
 
} 
 
.menu ul li { 
 
    list-style: none; 
 
    border-bottom: 1px solid grey; 
 
} 
 
.menu ul li a { 
 
    padding: 10px 15px; 
 
    display: block; 
 
    color: black; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
} 
 
.menu ul li:last-child { 
 
    border-bottom: none; 
 
    border-top-left-radius: 0; 
 
} 
 
.menu ul li a:hover { 
 
    background: white; 
 
} 
 
.menu li:first-child:hover a { 
 
    border-top-left-radius: 10px; 
 
    border-top-right-radius: 10px; 
 
} 
 

 
.menu li:last-child:hover a { 
 
    border-bottom-left-radius: 10px; 
 
    border-bottom-right-radius: 10px; 
 
}

<div class="menu"> 
 
    <ul> 
 
    <li><a href="#">Link 1 </a> 
 
    </li> 
 
    <li><a href="#">Link 2 </a> 
 
    </li> 
 
    <li><a href="#">Link 3 </a> 
 
    </li> 
 
    <li><a href="#">Link 4 </a> 
 
    </li> 
 
    <li><a href="#">Link 5 </a> 
 
    </li> 
 
    </ul> 
 
</div>

首先我加padding-left: 0;到.menu ul选择，然后更换您的最后一个样式.menu li a:first-child:hover有以下仅添加左上&右上边框的第一个菜单项和左下&右下边框的最后一个项目：

.menu li:first-child:hover a { 
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px; 
} 

.menu li:last-child:hover a { 
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px; 
}

来源

2016-07-31 06:37:12

如何使悬停使用边界半径的第一个孩子

回答

相关问题