当我将鼠标悬停在按钮上时，我想要新图像来描述该按钮，但它正在闪烁

Question

当我将鼠标悬停在按钮上以将按钮保持在其位置并在下方显示一个小描述框时，我希望这样。演示中没有图片，因此您无法确切地看到我在说什么。 这里还有一张图片应该是什么样的。

演示：http://jsbin.com/UXAleHi/1

CSS：

nav .ona  a{
   width: 151px;
   height: 70px;
   line-height: 76px;
   position: absolute;
   left: 350px;
}

nav .ona a:hover{
   width: 293px;
   height: 62px;
   position: absolute;
   top: 70px;
   left: 257px;
   background-image: url("Images/onama.png");
   background-repeat: no-repeat;
   display: block;
   margin: 0;
   padding: 0;
}

Answer 1

如评论中所述：

悬停时，请勿重新调整大小，也不要在链接元素本身上设置其他位置。这将使它保持在同一个地方。我用一个例子创建了一个简化的代码演示，如何在悬停时显示另一个内容：

<强> HTML

<div class="ona">
    <a href="onama.html">
        O NAMA
        <span>Some more infos</span>
    </a>
</div>

<强> CSS

.ona  a {
    width: 150px;
    line-height: 75px;
    position: absolute;
}

.ona  a:hover {
    background: transparent url(http://lorempixel.com/150/75) no-repeat 0 0;
}

.ona a > span {
    display: none;
}

.ona a:hover > span {
    display: block;
}

<强>演示

Try before buy