3

我在使用border-radius带有. 该属性似乎不起作用。当您将鼠标悬停在具有红色背景的导航项上时， 应该被剪裁为 的形状，但它只是显示为标准矩形。position:fixedoverflow:hiddenoverflowdiv.bmopt#mstrip

HTML：

<div id='mstrip'>
    <div class='mlabel first'>
        <a href='#' class='mopt'>Item1</a>
        <div class='bmopt'></div>
    </div>
    <div class='mlabel'>
        <a href='#' class='mopt'>Item2</a>
        <div class='bmopt'></div>
    </div>
    <div class='mlabel'>
        <a href='#' class='mopt'>Item3</a>
        <div class='bmopt'></div>
    </div>
    <div class='mlabel'>
        <a href='#' class='mopt'>Item4</a>
        <div class='bmopt'></div>
    </div>
    <div class='mlabel'>
        <a href='#' class='mopt'>Item5</a>
        <div class='bmopt'></div>
    </div>
</div>

CSS：

#mstrip {
    width: 92px;
    height: 223px;
    position: fixed;
    top: 20px;
    border-radius: 40% 8px;
    z-index: 100;
    background: #000;
    overflow: hidden;
    box-shadow: 0 0 4px #000;
}
.mlabel {
    width: 92px;
    height: 35px;
}
.first {
    margin-top: 24px;
}
.mopt {
    display: block;
    width: 92px;
    height: 29px;
    padding-top: 6px;
    text-align: center;
    color: #FFF;
    text-decoration: none;
    font: menu;
    font-size: 0.9em;
    text-shadow: 0 0 1px #FFF;
}
.bmopt {
    position: relative;
    width: 92px;
    height: 35px;
    background: #F00;
    margin-top: -35px;
    z-index: -1;
}

这是此错误的一个工作示例：http: //jsfiddle.net/UxLHR/7/

有没有解决的办法？

4

1 回答 1

0

I think that the problem arises from changing opacity in the element; that creates a separate stacking context and is probably the origin of the bug.

I have solved it making it simpler; just changing the color of the mlabel class on hover, and setting a transition on this. I don't think that the inner div is necesary.

.mlabel {
    width: 92px;
    height: 35px;
    background-color: black;
    -webkit-transition: background-color 1s;
}
.mlabel:hover {
    background-color: red;
}

updated fiddle

(transition only for webkit)

于 2013-04-20T20:08:15.857 回答