悬停框位置问题
Hover box position issue
我有一个很大的(对我来说)问题
我正在构建一个网站,试图制作一个类别顶部栏,其中包含一个框,显示鼠标悬停时文本的下行部分。
但是当我将鼠标悬停在类别名称上时,出现框会使类别下降。
如何让它们保持向上,只让盒子向下重叠内容?
我有以下代码:https://jsfiddle.net/oqshbxge/
<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;
}
只需将 vertical-align: top;
添加到 .top-category
:
.top-category {
display: inline-block;
vertical-align: top;
}
我有一个很大的(对我来说)问题
我正在构建一个网站,试图制作一个类别顶部栏,其中包含一个框,显示鼠标悬停时文本的下行部分。
但是当我将鼠标悬停在类别名称上时,出现框会使类别下降。
如何让它们保持向上,只让盒子向下重叠内容?
我有以下代码:https://jsfiddle.net/oqshbxge/
<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;
}
只需将 vertical-align: top;
添加到 .top-category
:
.top-category {
display: inline-block;
vertical-align: top;
}