Diskuze: Po najetí myši, okno

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

Avatar
niveses
Redaktor
Avatar
niveses:

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
Redaktor
Avatar
Odpovídá na niveses
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
niveses
Redaktor
Avatar
niveses:

Stále nevím :()

 
Nahoru Odpovědět 9.3.2013 22:17
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na niveses
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na niveses
David Čápka:

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:

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:

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:

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
Redaktor
Avatar
Odpovídá na niveses
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
niveses
Redaktor
Avatar
niveses:

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:

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
Redaktor
Avatar
Odpovídá na niveses
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Michal Žůrek (misaz):

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.