| Autor | Zpráva | ||
|---|---|---|---|
| litvi Profil * |
Dobry den,
mel bych dotaz. Existuje moznost za pomoci CSS: Priklad: Mam dva divy. Prvni did je klasicke menu a v druhem divu chci aby se na zaklade prvniho divu ( #prvniDiv a:hover ) zmenil obrazek v tom druhem divu. Setkal se s tim nekdo ? V soucasne dobe to mam pres javascript, ale rad bych to resil - pokud mozno za pomoci css. Diky za info, litvi Moderátor Chamurappi: Tvůj projev je špatně srozumitelný, piš prosím s diakritikou.
|
||
| mckay Profil |
#2 · Zasláno: 10. 7. 2010, 02:09:58
Pokud to dobře chápu, tak tuším, že tohle skrze css (zatím) nejde.
|
||
| Beavis Profil |
#3 · Zasláno: 10. 7. 2010, 03:34:45
Přes JavaScript to bude ještě nějako dobu nejlepší, s tímto problémem jsem se taky setkal, ale nevím, jestli to má CSS3 atp. vyřešit.
|
||
| Chamurappi Profil |
#4 · Zasláno: 10. 7. 2010, 05:11:22
Reaguji na litviho:
Viz Selektor na predosleho brata (siblings) (celé vlákno). Reaguji na mckaye a Beavise: CSS to pravděpodobně nikdy umět nebude. |
||
| litvi Profil * |
#5 · Zasláno: 10. 7. 2010, 09:42:24
To je skoda... Ja to tusil, ze to nepujde. :(
Problem je ten, ze javascript nemusi mit kazdy povoleny :( Ja nemam nastudovane dukladne ccs3, ale doufal, ze nekdo rekne treba " to je jasny ze to jde ":) litvi |
||
| Bubák Profil |
#6 · Zasláno: 10. 7. 2010, 14:38:12
V CSS 2.1 jde udělat něco takového (pro jednoduchost v ukázce měním jen barvu pozadí):
<style>
#menu {position: relative; background: #def}
#menu ul {margin: 0; padding: 1em 0 1em 40px}
a span {position: absolute; bottom: -60px; left: 1em ;
width: 40px; height: 40px; border: 1px solid gold;}
#a a:hover span {background: #ff0;}
#b a:hover span {background: #0ff;}
#c a:hover span {background: #0f0;}
#d a:hover span {background: #ff0;}
</style>
<div id=menu>
<ul>
<li id="a"><a href="#">Lorem<span></span></a></li>
<li id="b"><a href="#">ipsum<span></span></a></li>
<li id="c"><a href="#">dolor<span></span></a></li>
<li id="d"><a href="#">sit amet<span></span></a></li>
</ul>
</div>Řešení nesplňuje zadání, jen za určitých okolností dokáže vytvořit takovou iluzi. Hlavní nevýhodou je vazba na pozici rohu DIVu menu. Doporučil bych, jen pokud by hover obrázek (na pozadí) měl být pevně svázán s menu, byl by nad/pod nebo vedle něj. Takže javascriptové řešení je flexibilnější. Vím, že "obrázek" reaguje při přejetí myší, nezabýval jsem se tím, ale to jde jednoduše ošetřit. Na Interval.cz jde vyšťourat v sekci Pro CSS z nepřehledné hromady několik podobných řešení, třebas tohle: http://interval.cz/clanky/vertikalni-menu-s-komentari/ |
||
| bencik Profil |
#7 · Zasláno: 10. 7. 2010, 17:04:19
Nevím jestli to chápu dobře, ale nešlo by neco jako #prvni:hover #druhy {background: url(2.jpg);} ?
|
||
| litvi Profil * |
#8 · Zasláno: 10. 7. 2010, 23:28:34
zkusim jeste koumat, jestli se mi to podari poresit.
kdyztak poslu nejaky report. litvi |
||
| litvi Profil * |
tak toto musim vyzkouset v tom projektu ve kterem to potrebuji... nechce se mi verit, ze by to bylo takto jednoduche...
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
font: .814em/1.8 'lucida sans unicode', 'lucida grande', sans-serif;
}
#parent {
height: 100px;
width: 400px;
background: #39f;
color: #fff;
}
#hover {
position: absolute;
top: 50px;
right: 0;
width: 200px;
height: 100px;
visibility: hidden;
background: #06c;
}
#parent:hover #hover {
visibility: visible;
}
</style>
<div id="parent">
<p>When this is hovered over, another block will become visible.</p>
<div id="hover">
<p>...And this is the hovered div.</p>
</div>
</div> |
||
| Tayger Profil * |
#10 · Zasláno: 11. 7. 2010, 10:54:58
litvi:
Hehe, přesně nad něčím takovým jsem zrovna uvažoval, absolutně pozicovaný blok display none, který se po v případě pseudovlastnosti hover zviditelní. Jen je tam malá potíž, že :hover v prohlížečích fungovalo jen na odkazy, pouze mozila to uměla zpracovat i u jiných prvků. Ale netuším jak je to u těch nejnovějších prohlížečů. |
||
| bencik Profil |
#11 · Zasláno: 11. 7. 2010, 11:10:30
Tayger:
chrome, opera, safari a FF bez problémů, IE8 myslím taky a IE7 jakž takž... IE6 myslím že ne |
||
| Tayger Profil * |
#12 · Zasláno: 11. 7. 2010, 11:12:57
bencik:
díky, dobré vědět. |
||
| Bubák Profil |
#13 · Zasláno: 11. 7. 2010, 16:44:32
IE7, IE 8 tohle umí ve standardním režimu, závisí na !doctype.
V IE6 ho nejde, ale dá se tomu pomost jajascriptem, pokud se s tím nechceš párat, najdi si nějaký hover.htc, třebas tady www.xs4all.nl/~peterned/. S kódem, který jsem tu dal já [#6] by ani IE6 neměl mít problém, protože využívám hover odkazu. Podmínkou pro funkci v IE6 je, aby odkaz samotný měl jakákoliv hover, což má ukázka nesplňuje, pokud by s tím byl problém, stačí do CSS přidat tuhle neškodnou: a:hover {visibility: vicible;} |
||
|
Časová prodleva: 14 let
|
|||
0