Question

我的问题是我在其中有圆角和列表（ul-＆gt; li），当我悬停在li元素上时，我的块圆角消失了。你能告诉我如何解决它。

演示：http://jsfiddle.net/kolxoznik1/zALFL/4/

HTML

            <div id="drop">
                <ul id="menu">
                    <li><a href="#home">Test-1</a></li>
                    <li><a href="#about">Test-2</a></li>
                    <li><a href="#skills">Test-3</a></li>
                </ul>
            </div>

CSS

ul{
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#drop {
    background: #F8F8F8;
    top: 40px;
    left: 0px;
    width: 180px;
    border: 1px solid #CCC;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px; 
}
#drop li a {
    color: #333;
    display: block;
    padding: 5px 10px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    text-decoration: none;
}
#drop li a:hover {
    background: #333;
    color: #FFF;
}

Answer 1

它的发生是因为li的背景位于div之外，因此不会出现弯曲的边框。

写：

#drop {
    overflow:hidden;
}

Updated fiddle here.

Answer 2

此修复程序为overflow:hidden drop

提供了div

问题是当悬停在列表项上时，列表项的角重叠在ul的角落。因此，当您为overflow:hidden提供ul时，隐藏重叠。 DEMO

Answer 3

使用last-child和first-child选项： Demo

#drop li:first-child a:hover {
     border-radius: 3px 3px 0 0;
    -webkit-border-radius:3px 3px 0 0;
    -ms-border-radius: 3px 3px 0 0;
    -o-border-radius: 3px 3px 0 0;
}
#drop li:last-child a:hover {
     border-radius:0 0 3px 3px;
    -webkit-border-radius:0 0 3px 3px;
    -ms-border-radius: 0 0 3px 3px;
    -o-border-radius: 0 0 3px 3px;
}

Answer 4

对元素使用border-radius

#drop li:first-child a {
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}
#drop li:last-child a {
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

Answer 5

更改为

#drop li a:hover {
background: #333;
color: #FFF;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
}

Answer 6

只需将圆度添加到悬停中即可！将旧#drop li a:hover更改为

#drop li a:hover {
    background: #333;
    color: #FFF;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px; 
}

不，在有人问之前，我不知道我在做什么。

Answer 7

将此添加到您的css中

ul li a:hover {
     border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px; 
}

Answer 8

你去：

http://jsfiddle.net/r3wt/zALFL/24/

#drop ul li a {
    color: #333;
    display: block;
    padding: 5px 10px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    text-decoration: none;
}
#drop ul li a:hover {
    background: #333;
    color: #FFF;
}
#drop ul li:last-child a {
    border-radius: 3px !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}
#drop ul li:first-child a {
    border-radius: 3px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

Answer 9

修复了此fiddle

中的问题

#drop li a { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; color: #333; display: block; padding: 5px 10px; font-family: Helvetica, Arial, sans-serif; font-size: 13px; text-decoration: none; }

CSS悬停块li元素消失边界圆

9 个答案: