NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:

Diskuze: môže hover ovplyvniť aj iné elementy ako ten, na ktorý kliknem?

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Libor Šimo (libcosenior)
Tvůrce
Avatar
Libor Šimo (libcosenior):23.3.2014 8:20

Povedzme že mám na v bloku niekoľko obrázkov a keď na jeden kliknem, zväčší sa na veľkosť bloku, ale chcel by som, aby sa zároveň ostatným obrázkok zmenilo opacity na nulu.
Dá sa toto dosiahnuť klikom na jeden obrázok?

Odpovědět
23.3.2014 8:20
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Libor Šimo (libcosenior)
Tvůrce
Avatar
Libor Šimo (libcosenior):23.3.2014 9:41

Mám takýto kód.

<!--index.html-->

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
        <link rel="stylesheet" href="style.css" type="text/css">
        <title>testy css</title>
        </head>

        <body>
                <div>
                <img class="upravene1" src="obrazky/simi.jpg" alt="Simonka" />
                <img class="upravene2" src="obrazky/simi.jpg" alt="Simonka" />
                </div>

  </body>
</html>

/*style.css*/

.upravene1 {
        position: fixed;
        left: 0px;
        top: 0px;
  width: 10%;
        transition-property: width padding;
        transition-durwation: 5s;
}
.upravene2 {
        position: fixed;
        left: 200px;
        top: 0px;
        width: 10%;
        transition-property: widfh padding;
        z-duration: 5s;
}

/* kliknutie na element */
img:hover {
  position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        padding-left: 0px;
        padding-top: 0px;
}

div {
        width: 100%;
}

a používam obrázok v prílohe.
Keď kliknem na ľavý obrázok, ten sa zväčší na celý div a pravý sa za ním schová.
Ale keď kliknem na pravý, zväčší sa, ale ľavý sa neschová a ostane viditeľný.

Poradí mi niekto, ako vzriešiť, aby sa ľavý obrázok tiež schoval?

Nahoru Odpovědět
23.3.2014 9:41
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Zdeněk Pavlátka
Tvůrce
Avatar
Odpovídá na Libor Šimo (libcosenior)
Zdeněk Pavlátka:23.3.2014 10:23 
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
<style>
.upravene1 {
       position: fixed;
       left: 0px;
       top: 0px;
       width: 10%;
       transition-property: width padding;
       transition-durwation: 5s;
}
.upravene2 {
       position: fixed;
       left: 200px;
       top: 0px;
       width: 10%;
       transition-property: width padding;
       z-duration: 5s;
}

div {
       width: 100%;
}
</style>
    <title>testy css</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
    $(".upravene1").mouseenter(function(){
        $(".upravene1").css({
            "left": "0px",
            "top": "0px",
            "width": "100%",
            "padding-left": "0px",
            "padding-top": "0px"
        });
        $(".upravene2").css({
            "left": "0px",
            "top": "0px",
            "width": "0%",
            "padding-left": "0px",
            "padding-top": "0px"
        });
    });
    $(".upravene2").mouseenter(function(){
        $(".upravene2").css({
            "left": "0px",
            "top": "0px",
            "width": "100%",
            "padding-left": "0px",
            "padding-top": "0px"
        });
        $(".upravene1").css({
            "left": "0px",
            "top": "0px",
            "width": "0%",
            "padding-left": "0px",
            "padding-top": "0px"
        });
    });
    $(".upravene1").mouseleave(function(){
        $(".upravene1").css({
            "left": "0px",
            "top": "0px",
            "width": "10%"
        });
        $(".upravene2").css({
            "position": "fixed",
            "left": "200px",
            "top": "0px",
            "width": "10%"
        });
    });
    $(".upravene2").mouseleave(function(){
        $(".upravene1").css({
            "left": "0px",
            "top": "0px",
            "width": "10%"
        });
        $(".upravene2").css({
            "position": "fixed",
            "left": "200px",
            "top": "0px",
            "width": "10%"
        });
    });
});
</script>
       </head>

       <body>
               <div>
               <img class="upravene1" src="http://www.itnetwork.cz/images/forum/80606_image_0_thumb.png" alt="Simonka" />
               <img class="upravene2" src="http://www.itnetwork.cz/images/forum/80606_image_0_thumb.png" alt="Simonka" />
               </div>

  </body>
</html>

přibližně takhle by to šlo přes javaScript.
EDIT: dalo by se to zjednodušit, ale na to teď nemám čas :) ten js by měl být ve zvláštním souboru

Editováno
Nahoru Odpovědět
23.3.2014 10:23
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Zdeněk Pavlátka
Tvůrce
Avatar
Odpovídá na Zdeněk Pavlátka
Zdeněk Pavlátka:23.3.2014 10:33

Vím, že to není přímo odpověď na původní otázku. Tohle je výsledek diskuze přes chat.

Nahoru Odpovědět
23.3.2014 10:33
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Libor Šimo (libcosenior)
Honza Bittner:23.3.2014 10:35

Něco jako

div:hover img
{
  opacity: 0;
}

div img:hover
{
  opacity: 1;
}

by mělo fungovat, ne?

Co máš namysli tou změnou velikostí?

Editováno
Nahoru Odpovědět
23.3.2014 10:35
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Libor Šimo (libcosenior)
Neaktivní uživatel:23.3.2014 10:42

Popravdě nevím, co by ten kód měl dělat, pokud to, co si myslím, tak je tak na 20 řádku css. Každopádně tam teď vidím chybu v css, mělo by tam být duration :)

transition-durwation: 5s;
Nahoru Odpovědět
23.3.2014 10:42
Neaktivní uživatelský účet
Avatar
Libor Šimo (libcosenior)
Tvůrce
Avatar
Libor Šimo (libcosenior):23.3.2014 11:38

Díky všetkým za reakcie. Tú chybu som si tiež všimol.:-)

Nahoru Odpovědět
23.3.2014 11:38
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 7 zpráv z 7.