Question

我有一个很大的问题（对我来说）

我正在建立一个网站，试图制作一个类别顶部栏，其中一个框显示悬停文本的下方。

但是当我将鼠标悬停在类别名称上时，出现的框会使类别下降。

如何让它们停留在上面，而只是让盒子沿着重叠的内容走下去？

    <div id="categories">
                <div class="top-category">  <a class="top-category-link noka uppercase" href="http://mode-m.pl/kategoria/syntezatory-modularne">Syntezatory Modularne</a>
    <div class="hover-box-outline">
        <a class="hover-box-category-top noka uppercase" href="http://mode-m.pl/kategoria/syntezatory-modularne">Syntezatory Modularne</a>
    </div>
</div>
<div class="divider-15"></div>
<div class="top-category">  <a class="top-category-link noka uppercase" href="http://mode-m.pl/kategoria/automaty-perkusyjne">Automaty perkusyjne</a>
    <div class="hover-box-outline">
        <a class="hover-box-category-top noka uppercase" href="http://mode-m.pl/kategoria/automaty-perkusyjne">Automaty perkusyjne</a>
        <br><br><br><br>
    </div>
</div>

<div class="divider-15"></div>

<div class="top-category">  <a class="top-category-link noka uppercase" href="http://mode-m.pl/kategoria/sprzet-studyjny">Sprzęt Studyjny</a>
    <div class="hover-box-outline">
        <a class="hover-box-category-top noka uppercase" href="http://mode-m.pl/kategoria/sprzet-studyjny">Sprzęt Studyjny</a>
    </div>
</div>

<div class="divider-15"></div>

<div class="top-category">  <a class="top-category-link noka uppercase" href="http://mode-m.pl/kategoria/syntezatory">Syntezatory</a>
    <div class="hover-box-outline">
        <a class="hover-box-category-top noka uppercase" href="http://mode-m.pl/kategoria/syntezatory">Syntezatory</a>
    </div>
</div>

<div class="divider-15"></div>

<div class="top-category">  <a class="top-category-link noka uppercase" href="http://mode-m.pl/kategoria/sekwencery">Sekwencery</a>
    <div class="hover-box-outline">
        <a class="hover-box-category-top noka uppercase" href="http://mode-m.pl/kategoria/sekwencery">Sekwencery</a>
    </div>
</div>

<div class="divider-15"></div>

<div class="top-category">  <a class="top-category-link noka uppercase" href="http://mode-m.pl/kategoria/kable">Kable</a>
    <div class="hover-box-outline">
        <a class="hover-box-category-top noka uppercase" href="http://mode-m.pl/kategoria/kable">Kable</a>
    </div>
</div>

<div class="divider-15"></div>

<div class="top-category">  <a class="top-category-link noka uppercase" href="http://mode-m.pl/kategoria/sprzet-gitarowy">Sprzęt Gitarowy</a>
    <div class="hover-box-outline">
        <a class="hover-box-category-top noka uppercase" href="http://mode-m.pl/kategoria/sprzet-gitarowy">Sprzęt Gitarowy</a>
    </div>
</div>          </div>

使用CSS：

    .top-category {
    display: inline-block;
}

.top-category-link {
    color: #1a1a1a;
    font-size: 10pt;
    transition: text-shadow 0.5s, color 0.5s, font-size 0.5s;
}

.top-category:hover > a{
    color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
    font-size: 15pt;
}

.top-category:hover > .hover-box-outline {
    display: block;
}

.hover-box-outline {
    border: 1px solid;
    background-color: rgba(255,255,255,0.75);
    width: auto;
    display: none;
    margin-top: 25px;
}

.hover-box-category-top {
    color: #1a1a1a;
}

.divider-15{
    width: 15px;
    display: inline-block;
}

Answer 1

只需将vertical-align: top;添加到.top-category：

.top-category {
  display: inline-block;
  vertical-align: top;
}

https://jsfiddle.net/oqshbxge/1/

悬停箱子位置问题

1 个答案: