Question

所以我有一个人们可以获得的“事物”列表，其中包含每个显示的信息。

＆lt; - div 1 a.img - ＆gt; ＆lt; - div 2 a.img - ＆gt; ＆lt; - div 3 a.img - ＆gt;

＆lt; - div 4 a.img - ＆gt; ＆lt; - div 5 a.img - ＆gt; ＆lt; - div 6 a.img - ＆gt;

当我将鼠标悬停在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;
}

任何帮助都会很棒，谢谢

Answer 1

您应该将display: block提供给a代码。

Answer 2

如果没有一些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>

这将显示四个黄色方框，其中包含一个标题。对于标签，我们在每个div的末尾添加一个简单的<span>，如下所示：

<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，left属性定位right，如下所示：

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

在图像下显示的悬停跨度

2 个答案: