hover - CSS边框半径父子问题（带有：悬停和位置：绝对）

Question

边界半径和子元素存在已知问题。子元素从父元素的圆角突出。

常见的解决方案是添加overflow:hidden到父元素。但是当父母有时它仍然不起作用position:absolute。

http://jsfiddle.net/Xhrx8/2/

Answer 1

HTML

 <div id="items">
<div id="top">One</div>
<div>Two</div>
<div>Three</div>
<div id="bottom">Four</div>

CSS

#items {
border: 1px solid black;
border-radius: 10px;
overflow: hidden;
position: absolute;
}

 #items div {
border-bottom: 1px solid black;
padding: 5px;
}

#items #top:hover {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
background-color: #ccc;
}
#items div:hover{
background-color: #ccc;
}
#items #bottom:hover {
background-color: #ccc;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
 }

现场示例http://jsfiddle.net/Xhrx8/3/

Answer 2

这似乎是 chrome css 的一个错误。
我们可以做的一种解决方法是使用包装器作为

<div style="position:absolute">
    <div id="items">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
    </div>
<div>

position:absolute并从中删除#items

小提琴

Answer 3

我喜欢 user1136403 的回答，但我会使用第一个和最后一个子 css 选择器。这样您就不必将 id="top", id="bottom" 添加到 HTML 中的第一个和最后一个 li。

HTML

<div id="items">
   <div >One</div>
   <div>Two</div>
   <div>Three</div>
   <div >Four</div>
</div>

CSS

#items {
border: 1px solid black;
border-radius: 10px;
overflow: hidden;
position: absolute;
}
#items div {
border-bottom: 1px solid black;
padding: 5px;
}    
#items div {
border-bottom:none; //removes the double border on the bottom
}
#items div:hover{
background-color: #ccc; //this is the only background color def you need
}
#items div:first-child:hover {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
#items div:last-child:hover {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}

另请注意，您在第一个、最后一个子 CSS 块中不需要“背景颜色”。它已在#items div:hover{} 中定义。这是小提琴。 http://jsfiddle.net/honkskillet/CHL8K/

Answer 4

这是 Chrome 中的一个已知错误（在 Firefox 中运行良好）。

您需要一个围绕您的 DIV #items 的包装器，并将属性分配给该包装器。

Answer 5

您需要通过 css3 强制硬件加速。

#items {
[......]
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}