| Autor | Zpráva | ||
|---|---|---|---|
| robbie Profil |
#1 · Zasláno: 1. 4. 2019, 20:15:25
Ahoj, potřeboval bych prosím pomoci s :hover položkou. Po najetí myši, pokud by šlo, aby se Hello world! napozicovalo přesně na střed stránky, už si s tím nevím rady, kde to nastavit. Zkoušel jsem position: absolute; left, right:..., margin: 0 auto, text-align: center, ale bez uspěchu. Děkuji moc
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div> |
||
| RastyAmateur Profil |
#2 · Zasláno: 1. 4. 2019, 20:30:38
robbie:
Živá ukázka První možností by bylo u .dropdown odstranit tu position: relative, čímž by se ta absolutní pozice začala vztahovat k body, což je ale dle mého názoru špatný přístup. Další možnost by byla využít jednotky vw. A třetí možností (jak je viděno v ukázce) by bylo nastavit .dropdown na display: block, čímž se jeho šířka nastaví normálně na 100% stránky, .dropdown-content nastavit width: 100% (spolu s box-sizing) a je to. Jen vznikne docela průser, že se Hello world nezobrazí při najetí myší na text, ale při najetí myši i vedle textu, po celé té šířce. Prostě normální blokový element. To se dá ošetřit změnou selektoru na .dropdown span:hover ~ .dropdown-content
Pokud to bude opravdu jen takto, tak mě lepší řešení nenapadá. Pokud to bude například na více položek toho dropdownu, přičemž budou vedle sebe (neboli ten inline-block či nějaký float je nutný), musel bys pravděpodobně vytvořit ještě jednoho velkého rodiče a tomu nastavit tu relativní pozici |
||
|
Časová prodleva: 5 let
|
|||
0