Question

我试图在悬停时让文字显示在这些圈子下面，但是当我尝试添加段落时，他们只是让我的圈子不合适。

HTML

<div class="row">
        <p><b>Works</b></p>
        <div "row1">
            <div class="round-button">
                <div class="round-button-circle" class=".col-md-4">
                    <a href="https://www.google.com" target="_blank" class="round-button">Google</a>
                </div>
            </div>
            <div class="round-button">
                <div class="round-button-circle" class=".col-md-4">
                    <a href="https://www.google.com" target="_blank" class="round-button">nn</a>
                </div>
            </div>
            <div class="round-button">
                <div class="round-button-circle" class=".col-md-4">
                    <a href="https://www.google.com" target="_blank" class="round-button">nm</a>
                </div>
            </div>
        </div>
        <div "row2">
            <div class="round-button">
                <div class="round-button-circle" class=".col-md-4">
                    <a href="https://www.google.com" target="_blank" class="round-button">nn</a>
                </div>
            </div>
            <div class="round-button">
                <div class="round-button-circle" class=".col-md-4">
                    <a href="https://www.google.com" target="_blank" class="round-button">nff</a>
                </div>
            </div>
            <div class="round-button">

CSS

.row
{
    height: 80%;
    width: 100%;
    text-align:center;
    padding-top: 2%;
    font-size: 25;
}
.round-button {
    display:inline-block;
    position: relative;
    width:10%;
    padding-top: 2%;
}
.round-button-circle {
    height: 100px;
    position:relative;
    margin:0 auto;
    border:2px solid #f0f0f0;
    background: white no-repeat center center;
    -moz-border-radius:100px;
    -webkit-border-radius:100px;
    border-radius: 100px;
    width: 100px;
    cursor:pointer;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    font-size: 0%;
}
.round-button-circle:hover {
    background:#000000;
    text-decoration-color: white;
    font-size: 50%;
  margin-bottom: 80%;
}
.round-button a{
    display:block;
    float:left;
    width:100%;
    padding-top:50%;
    padding-bottom:50%;
    line-height:1em;
    margin-top:-0.5em;

    text-align:center;
    color:#e2eaf3;
    font-family:Verdana;
    font-size:1.2em;
    font-weight:bold;
    text-decoration:none;
}

他们在小提琴中很接近，但在我的实际网站中，他们并不喜欢这样，所以请忽略它。当你将鼠标悬停在圆圈上时，我试图让文字显示在圆圈下方。有任何想法吗？ CSS和HTML新手

Answer 1

将这些行添加到.round-button a css

position: absolute;
bottom: -90px;
color: red;

（你可以替换颜色，只是为了让你注意到变化）

如何在不影响div的情况下使文本显示在div下

1 个答案: