Autor Zpráva
ForestCZE
Profil
Zdravím, mám tuto ukázku. Když najedu myší na rám tabletu, sníží se opacity, když z něj sjedu, opacity se vrátí, což je v pořádku. Potřeboval bych ale, aby to reagovalo pouze na ten rám, tj. když se budu myší pohybovat po displeji (černý prostor), aby opacity zůstalo nezměněné. Tuším, že se nějak musí na ty vnořené elementy provést preventDefault() nebo stopPropagation(), ale nedaří se mi. Jak na to, prosím?
Kcko
Profil
ForestCZE:
Na to nepotřebujes JS ne? Stačí Ti CSS a když to chceš dělat přes JS tak Ti stačí přes event kontrolovat target a na jakém jsi elementu.
ForestCZE
Profil
Kcko:
No v CSS by to šlo takto, ale stále je ten problém, že to reaguje na vnořené elementy.
Kcko
Profil
ForestCZE:
Na který element to má reagovat?
tttttttttttt
Profil *
Kcko:
Rozumím tomu tak, že při najetí na .tablet-container se mu má nastavit opacity, při najetí na potomka .tablet-content se má opacity vrátit na výchozí hodnotu. V CSS to není jednoduché (možné?). Po najetí na potomka je potřeba změnit opacity rodiče, což myslím nejde.

ForestCZE:
Pokud bys ten horní pruh udělal taky jako potomka, bude to jednodušší. Jinak JS musíš odchytit mouseenter na .tablet-content a změnit v něm opacity .tablet-container.
ForestCZE
Profil
tttttttttttt:
Pokud bys ten horní pruh udělal taky jako potomka, bude to jednodušší. Jinak JS musíš odchytit mouseenter na .tablet-content a změnit v něm opacity .tablet-container.

To bohužel nedělá to, co potřebuji. Pokud udělám to, co jsi napsal, tak se mi tablet více zprůhlední po najetí na displej tabletu, což je nežádoucí. Zkusím to popsat ještě jednou.

Mám otevřený tablet ve hře, ve kterém je nějaká HTML stránka a vyplňuji tam například inputy, takže provádím něco v .tablet-content elementu. A najednou se rozhodnu, že chci vidět, co se kolem mě děje, tak najedu myší na ten rám .tablet-container a chci snížit opacity, abych viděl, co je za tabletem a pak se rozhodnu zase pokračovat, tak sjedu z toho rámu a mám opět opacity na full. Je to možné?
tttttttttttt
Profil *
Jen jsem to nedobře popsal.

* po najetí na .tablet-container nastavíš .tablet-container na průhledný
* po najetí na .tablet-content nastavíš .tablet-container na neprůhledný

Tím by ten efekt měl být jen na rámečku.
ForestCZE
Profil
tttttttttttt:

Jestli jsem to pochopil správně, tak by to mělo být takto. Snažím se ještě přijít na jeden nežádoucí efekt a to ten, že se to provede pouze jednou a víckrát ne, dokud nesjedu myší až na .background

Je potřeba to ještě nějak překombit víc?

EDIT: Je to zbytečně složité. Opravím jeden efekt a rozbije se druhý.

Nakonec jsem to udělal jednoduše:

$(".tablet-container").mouseenter(function() {
    $(this).css("opacity", 1)
}).mouseleave(function() {
    $(this).css("opacity", 0.3)
})

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0