Diskuze: Po najetí myši, okno

HTML a CSS HTML a CSS Po najetí myši, okno American English version English version

Aktivity (1)
Avatar
niveses
Redaktor
Avatar
niveses:2.3.2013 17:24

Zdravím Vás. Potřebuji, aby mi po najetí myši na slovní spojení vyjelo info a jednoduchá fofogalerie. Rozvedu mojí myšlenku :) Budu mít seznam slov. Po najetí na slovo, bych chtěl, aby se vytvořilo jakési okno a v něm abych se něco o tom slově dozvěděl, a bylo tam már fotek. Bohužel to nemám jak přirovnat. Snad to pochopíte :).Děkuji a s pozdravem

Editováno 2.3.2013 17:26
 
Odpovědět 2.3.2013 17:24
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na niveses
Honza Bittner:9.3.2013 22:13

Ahoj, vyřešil jsi svůj problém nebo stále nevíš ? :)

Editováno 9.3.2013 22:14
Nahoru Odpovědět 9.3.2013 22:13
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat se mě na cokoli můžeš na https://...
Avatar
niveses
Redaktor
Avatar
niveses:9.3.2013 22:17

Stále nevím :()

 
Nahoru Odpovědět 9.3.2013 22:17
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na niveses
Honza Bittner:9.3.2013 22:41

No takže ... chtěl si to u nějakého slova že ?

  1. tudíž ... asi budeš chtít text zvýraznit (nějak) i bez hoveru ..

takže si to slovo dáš například do

<b> </b>

a v CSS si nastavíš co všechno má splňovat

b { ... }
  1. teď přichází fáze zobrazení toho okna ... dalo by se to udělat tak, že ho dáš před nebo za slovo a nastavíš mu výšku na 0 (display: inline), po najetí (hover) mu nastavíš pozici aby byl jakoby před textem (myslím že position: relative; ) a možná také z-index: 100; (třeba) ... no, myslím že s malou úpravou by to mohlo fungovat :)

Kdyžtak napiš :)
____
otázka jak nastavit po kliknutí na b aby se udelal ten hover ?

b:hover + #muj_skryty_div_1
{
//zde nastavuješ parametry již pro to okno
}
Editováno 9.3.2013 22:44
Nahoru Odpovědět  +1 9.3.2013 22:41
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat se mě na cokoli můžeš na https://...
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na niveses
David Čápka:10.3.2013 6:56

Tomu <b> bych se vyhnal, už se nepoužívá. Co chceš se dělá spíše přes JavaScript. Pomocí CSS by to také mělo jít, ale nikdy nedosáhneš takového efektu, jaký asi očekáváš.

Nahoru Odpovědět 10.3.2013 6:56
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
niveses
Redaktor
Avatar
niveses:10.3.2013 8:21

Děkuji moc za odpovědi. To co chci má například Alza u posledního nákupu.. Po najetí myši se objeví větší okno a tam je vice info.... Postup jdu zkusit pak napíšu.

 
Nahoru Odpovědět 10.3.2013 8:21
Avatar
niveses
Redaktor
Avatar
niveses:10.3.2013 8:21

Děkuji moc za odpovědi. To co chci má například Alza u posledního nákupu.. Po najetí myši se objeví větší okno a tam je vice info.... Postup jdu zkusit pak napíšu.

 
Nahoru Odpovědět 10.3.2013 8:21
Avatar
niveses
Redaktor
Avatar
niveses:10.3.2013 9:37

Nějak se mi to nepodařilo, sdraco, jak přes JS? Díky

Btw: jak lze editovat nebo mazat svoje příspěvky? U tohohle mám tužku, ale u ostaních ne. Díky

Editováno 10.3.2013 9:38
 
Nahoru Odpovědět 10.3.2013 9:37
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na niveses
Honza Bittner:10.3.2013 10:41

Ano, přes JS by to šlo, ale niveses píše do HTML&CSS takže myslím že JS neovládá ...


nicméně jsem mou verzi zkusil a funguje ..
jen musíš dát vždy ten panel který chceš zobrazit pod daný < b > < /b >

HTML :

Můj text a tady je <b>panel</b>
<div class="mujpanel">
  tady je text v prvnim panelu a funguje jen na <b> nademnou
</div>

Můj 2. text a tady je 2. <b>panel</b>
<div class="mujpanel">
   tady je text v druhem panelu a funguje jen na <b> nademnou
</div>

CSS :

.mujpanel
{
        height: 0px;
        width: 0px;
        background: yellow;
        border: 2px solid black;
        visibility: hidden;
        position: fixed;
}

b:hover + .mujpanel
{
        height: 500px;
        width: 500px;
        background: red;
        visibility : visible;
        left: 100px;
}

Tento způsob ti zobrazí panel nad textem, takže ti nic "neodsune", sice to není nejlepší řešení, ale funguje ... ;)

(jestli by jsi chtěl by jsi chtěl zobrazit daný div i když saháš na daný div tak v css doplnit

b:hover + .mujpanel, .mujpanel:hover
{ }
Editováno 10.3.2013 10:44
Nahoru Odpovědět  +1 10.3.2013 10:41
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat se mě na cokoli můžeš na https://...
Avatar
niveses
Redaktor
Avatar
niveses:10.3.2013 10:45

Díky, teď si vyhraji s css a myslím, že to bude stačit, nicméně, jak by se to dalo udělat v JS? Díky

 
Nahoru Odpovědět  +1 10.3.2013 10:45
Avatar
xxxvodnikxxx
Člen
Avatar
xxxvodnikxxx:10.3.2013 11:01

Super, díky za odpovědi, řešil jsem něco podobnýho :) kódování od HoBi je elegantní :)

Nahoru Odpovědět  +1 10.3.2013 11:01
Unix- svět, kde chcete být nulou :) (UID)
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na niveses
Honza Bittner:10.3.2013 11:02

Myslím si, že když si dobře vyhraješ s CSS3 tak to bude stačit :)

Jinak jak by to vypadalo v JS nevím, zatím ho moc neumím ;)
Nicméně by tu někdo mohl napsat více tutoriálů pro začátečníky .. :/

Nahoru Odpovědět 10.3.2013 11:02
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat se mě na cokoli můžeš na https://...
Avatar
Michal Žůrek (misaz):16.3.2013 17:00

Pomocí JavaScriptu (a trochou CSS) by to mohlo vypad takto: http://www.itnetwork.cz/dev-lighter/74

Víceméně se však pouze mění css. Tedy jsem nic zas tak vyjmečného nevymyslel.

Nahoru Odpovědět 16.3.2013 17:00
Nesnáším {}, proto se jim vyhýbám.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Tato diskuze byla označena moderátorem jako nekonstruktivní a myslíme si, že nemá pro veřejnost příliš vysokou hodnotu. Členy můžete samozřejmě stále oslovit soukromě a to formou zpráv nebo chatu.

Zobrazeno 13 zpráv z 13.