float:right 和 css 悬停的奇怪行为

Question

我有这个页面http://myrender.altervista.org/show2.html

我使用 float:right 指令将 5 个按钮移动到右上角，然后这些按钮中的悬停突然停止工作（在 float:right 工作之前）。

有HTML:

<div class="container">
    <div class="imgcontainer">
        <div class="latest">Ultimi Caricamenti</div>
        <img class="imgslide" src="" />
    </div>
    <div class="buttondiv">
        <div class="button" onclick="change(0); clearInterval(t);" id="p0"></div>
        <div class="button" onclick="change(1); clearInterval(t);" id="p1"></div>
        <div class="button" onclick="change(2); clearInterval(t);" id="p2"></div>
        <div class="button" onclick="change(3); clearInterval(t);" id="p3"></div>
        <div class="button" onclick="change(4); clearInterval(t);" id="p4"></div>
    </div>
</div>

还有CSS 类（只需要）：

.button
{
    display:inline-block;
    height:10px;
    width:10px;
    background:#eee;
    border-radius:50%;
    cursor: pointer;
    opacity: 0.6;
}

.button:hover
{
    opacity:1.0;
}

.buttondiv
{
    margin-top: -17px;
    padding-right: 5px;
    float:right;
}

.buttonactive
{
    background:#1390cd;
    opacity:0.8;
}

.container
{
    width:592px;
    height:183px;
}

提前致谢:D

Answer 1

只需将 position: relative; 添加到 .buttondiv 或 .button

float:right 和 css 悬停的奇怪行为

Strange behavior with float:right and css hover

html

css

hover

css-float