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

Without some html code it is difficult to be sure, but I would guess that there are some unclosed tags in the source. But if I understand correctly, you have some boxes (images in your case), and you have some captions/text that you want to display at the bottom of the boxes when the user moves their mouse over them.

Below I will show how you can get this effect using only CSS. I will use divs that I float as the boxes. The basic html and css is as follows:

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

This will show four yellow boxes with a header inside them. For the labels we add a simple <span> at the end of each div, as follows:

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

Then we add the following css to make them only visible when the user moves the mouse over the box:

.box span {
    display: none;
}

.box:hover span {
    display: inline;
}

Now the basic effect is present. Next is to get the hover text positioned correctly. Do do this we use absolute positioning for the span relative to the box. To do this we first add position:relative to the rule .box { /* ... */ }. Now we add position:absolute to .box:hover span { /*...*/ }. Since the box has relative position, the position of the absolutely positioned span will be relative to the box.

Now we can position the span using the attributes top, bottom, left, right as follows:

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

This will place the bottom of the span element at the bottom of the box, and resize it so that it goes from left to right. The text itself is centered horizontally centered. If you now move the mouse over any of the boxes, the text will display at the bottom of each box.

For completeness, here is the full example:

<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 回答