1

我希望当我将鼠标悬停在按钮上以将按钮保持在其位置并在下面显示一个小描述框时。演示中没有图片，所以你看不到我在说什么。这里还有一张照片应该是什么样子。

演示：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;
}
4

1 回答 1

2

正如评论中所讨论的：

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

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;
}

演示

先试后买

于 2013-08-31T16:17:24.913 回答