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 に答える