| Autor | Zpráva | ||
|---|---|---|---|
| Medvídek Profil |
#1 · Zasláno: 2. 12. 2010, 13:31:04 · Upravil/a: Medvídek
Zdravím,
Mám CSS hover vyjížděcí menu a potřeboval bych nastavit hover efekt prvnímu menu, když sem myší na druhým menu. HTML:
<ul>
<li><a href="">Domů</a>
<ul>
<li><a href="">Přihlásit</a></li>
<li><a href="">Odhlásit</a></li>
</ul>
</li>
<li><a href="">Služby</a>
<ul>
<li><a href="">Dostupné služby</a></li>
<li><a href="">Upravit služby</a></li>
</ul>
</li>
<li><a href="">KDE</a>
<ul>
<li><a href="">Aktivace</a></li>
<li><a href="">Správa</a></li>
</ul>
</li>
<li><a href="">Položka 4</a>
<ul>
<li><a href="">Login</a></li>
<li><a href="">Logout</a></li>
</ul>
</li>
</ul>
a CSS: #header ul {float:left;width:700px;height:30px;list-style:none;}
#header ul li {float:left;height:30px;}
#header ul li a {height:30px;display:block;color:white;text-decoration:none;font-weight:bold;font-size:1.1em;line-height:1.7em;padding:0 10px;}
#header ul li a:hover {color:#FFC202;background:#2A2A2C;width:200px;}
#header ul li ul {display:none;clear:both;width:200px;border-top:3px solid white;}
#header ul li ul li {float:left;clear:both;height:30px;}
#header ul li ul li a {height:30px;display:block;color:white;background:#6E6E70;text-decoration:none;font-size:0.9em;line-height:1.9em;width:200px;}
#header ul li:hover ul {display:block;}Já bych potřeboval přiřadit #header ul li šířku, pokud je ukazatel myši na položce v #header ul li ul li. Čili něco jako #hover ul li ul li:hover #hover ul li {width:200px;} (Což je kravina). Jde to nějak udělat? |
||
| panther Profil |
#2 · Zasláno: 2. 12. 2010, 14:19:37
Medvídek:
myslím, že by ti mělo stačit obyčejné #header ul li:hover. Obecně nelze v CSS ovlivňovat zanořeným elementem rodiče.
|
||
| Medvídek Profil |
#3 · Zasláno: 2. 12. 2010, 14:49:00
panther:
Díky, jen takže zanořený neovlivnim (samozřejmě #header ul li:hover funguje, ale šlo mi i o jiný případy). |
||
| panther Profil |
#4 · Zasláno: 2. 12. 2010, 14:53:15
Medvídek:
„takže zanořený neovlivnim“ zanořený ano, nadřazený ne. „samozřejmě #header ul li:hover funguje, ale šlo mi i o jiný případy“ např.? Buď konkrétní. |
||
|
Časová prodleva: 25 dní
|
|||
| Medvídek Profil |
#5 · Zasláno: 27. 12. 2010, 11:07:26 · Upravil/a: Medvídek
panther:
„např.? Buď konkrétní.“ Třeba v takovéto struktuře:
<div class="blok">
<h1 class="images"><a href="" title="O XXX">O XXX<span class="first"></span></a></h1>
<ul>
<li><a href="" title="Vize a poslání">vize a poslání</a></li>
<li><a href="" title="XXX holding">XXX holding</a></li>
<li><a href="" title="Kontakty">kontakty</a></li>
</ul>
<h1 class="text"><a href="">O XXX</a></h1>
</div>
#content .blok {width:238px;min-height:300px;background:#FFBD0A;float:left;margin-right:15px;position:relative;}
#content .blok ul {list-style:none;margin-top:10px;}
#content .blok ul li {float:left;clear:both;margin-left:10px;width:100%;margin-top:5px;}
#content .blok ul li a {background: url(http://www.xxx.cz/front/img/intro-li.gif) no-repeat left center;text-indent:15px;display:block;color:white;text-decoration:none;font-size:0.7em;}
#content .blok ul li a:hover {color:#000;}
#content .blok h1.images {width:238px;height:165px;}
#content .blok h1.images a {width:238px;height:165px;position:relative;overflow:hidden;display:block;}
#content .blok h1.images a span {width:238px;height:165px;display:block;position:absolute;left:0;top:0;cursor:pointer;}
#content .blok h1.images a span.first {background:#F8981C url(../images/auto.jpg) no-repeat left top;}
#content .blok h1.text {position:absolute;bottom:10px;left:10px;}
#content .blok h1.text a {color:#FFF;text-decoration:none;font-size:0.8em;}
#content .blok h1.text a:hover {color:#000;}
Lze v CSS zařídit, aby když najedu na obrázek (<h1 class="images"><a href="" title="O XXX">O XXX<span class="first"></span></a></h1>) ze změnila barva spodního nadpisu (<h1 class="text"><a href="">O XXX</a></h1>)? |
||
| panther Profil |
#6 · Zasláno: 27. 12. 2010, 11:24:35 · Upravil/a: panther
Medvídek:
jedná se o úplně jiný případ, než jsi psal v [#1]. Nadřazená položka právě rozbaleného submenu, o které byla řeč, se dá zachytit přes li:hover.
To, co píšeš v [#5] v CSS moc dobře nepůjde, v rychlosti mě napadlo třeba tohle (jestli jsem tě dobře pochopil): <!doctype html>
<style>
a {color: #fff;}
.blok {width:238px;min-height:300px;background:#FFBD0A;float:left;margin-right:15px;position:relative;}
.blok h1.images {background: green}
.blok h1.text {background: blue; position:absolute;bottom:10px;left:10px;}
.blok h1.images:hover+ul+h1.text {background: red}
</style>
<div class="blok">
<h1 class="images"><a href="" title="O XXX">O XXX<span class="first"></span></a></h1>
<ul>
<li>xxx
<li>xxx
</ul>
<h1 class="text"><a href="">O XXX</a></h1>
</div>Nebude to fungovat všude, starší IE neznají + selektor. Ovlivňovat sousední element v CSS nejde. Většinou se to řeší tak, že .text je zanořen do .images a je napozicovaný pryč.
|
||
| Medvídek Profil |
#7 · Zasláno: 27. 12. 2010, 11:57:53
panther:
O li:hover vím, tady bych mohl udělat klidně celej .blok:hover. ALe právě že starší IE to neznaj a musel sem tam cpát hover.htc. V tom případě to udělám přes jQuery asi. |
||
| margin Profil * |
#8 · Zasláno: 27. 12. 2010, 12:36:30
Medvídek:
„tom případě to udělám přes jQuery asi.“ Jestli to uděláš 1 kB souborem hover.htc, nebo použiješ 76,7 kB velký jQuery, záleží na tobě. |
||
| Dranel Profil |
#9 · Zasláno: 27. 12. 2010, 12:45:34
margin:
Jestli už ho ke stránce připojený má kvůli něčemu jinému, proč ho nevyužít. |
||
| Medvídek Profil |
#10 · Zasláno: 27. 12. 2010, 13:31:34
margin:
jQuery mám už právě připojené. |
||
|
Časová prodleva: 16 let
|
|||
0