0

だから私は、このように表示されたそれぞれについての情報で人々が獲得できる「もの」のリストを持っています.

<--div 1 a.img--> <--div 2 a.img--> <--div 3 a.img-->

<--div 4 a.img--> <--div 5 a.img--> <--div 6 a.img-->

div 1 の a.img にカーソルを合わせると、表示されるスパンは div 4 の img の下にあります。

これは私が持っているcssです 

a {
    cursor: default;
    position: relative;
    text-decoration: none;
    z-index: 1;
}

a:hover span {
    display:block;
    position:absolute;
    background:#ffffff;
    border:1px solid #cccccc;
    color:#6c6c6c;
    max-width: 210px;
    padding:5px;
    z-index:2;
}

どんな助けでも素晴らしいでしょう、ありがとう

4

2 に答える 2

0

display: blockタグにあげるべきaです。

于 2013-06-21T14:59:58.483 に答える
0

いくつかの html コードがないと、確かなことはわかりませんが、ソースに閉じられていないタグがいくつかあると思います。しかし、私が正しく理解していれば、いくつかのボックス (あなたの場合は画像) があり、ユーザーがマウスをそれらの上に移動したときにボックスの下部に表示するキャプション/テキストがあります。

以下に、CSS のみを使用してこの効果を得る方法を示します。ボックスとしてフロートする div を使用します。基本的な html と css は次のとおりです。

<html>
<head>
<style type="text/css">
.box {
    float: left;
    width: 200px;
    height: 200px;
    background-color: yellow;
    margin: 10px;
}
.box h2 { text-align: center; }
</style>
</head>
<body>
    <div class="box"><h2>Div 1</h2></div>
    <div class="box"><h2>Div 2</h2></div>
    <div class="box"><h2>Div 3</h2></div>
    <div class="box"><h2>Div 4</h2></div>
</body>
</html>

これにより、ヘッダーが内側にある 4 つの黄色いボックスが表示されます。ラベルについては、<span>次のように、各 div の最後に単純なものを追加します。

<div class="box"><h2>Div 1</h2><span>div 1 hover</span></div>

次に、次の css を追加して、ユーザーがマウスをボックスの上に移動したときにのみ表示されるようにします。

.box span {
    display: none;
}

.box:hover span {
    display: inline;
}

これで基本的な効果が現れました。次は、ホバー テキストを正しく配置します。これを行うspanには、ボックスに対する相対的な絶対配置を使用します。これを行うには、まずposition:relativeルールに を追加し.box { /* ... */ }ます。に追加position:absoluteし.box:hover span { /*...*/ }ます。ボックスには相対位置があるため、絶対配置の位置spanはボックスに対して相対的になります。

次のように、span属性top、bottom、を使用してを配置できます。leftright

.box span {
    display: none;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    text-align: center;
}

これにより、span要素の下部がボックスの下部に配置され、左から右に移動するようにサイズが変更されます。テキスト自体は水平方向に中央揃えされます。マウスをボックスの上に移動すると、各ボックスの下部にテキストが表示されます。

完全を期すために、完全な例を次に示します。

<html>
<head>
<style type="text/css">
    .box {
        float: left;
        width: 200px;
        height: 200px;
        background-color: yellow;
        margin: 10px;
        position: relative;
    }

    .box h2 { text-align: center; }

    .box span {
        display: none;
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        text-align: center;
    }

    .box:hover span {
        display: inline;
    }
</style>
</head>
<body>
    <div class="box"><h2>Div 1</h2><span>div 1 hover</span></div>
    <div class="box"><h2>Div 2</h2><span>div 2 hover</span></div>
    <div class="box"><h2>Div 3</h2><span>div 3 hover</span></div>
    <div class="box"><h2>Div 4</h2><span>div 4 hover</span></div>
</body>
</html>
于 2013-06-21T16:52:04.683 に答える