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

Naučíme tě pracovat na home-office.

Zjistit více...

Aktivity

Libor Šimo (libcosenior)

Tvůrce

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.

Libor Šimo (libcosenior)

Tvůrce

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.

Zdeněk Pavlátka

Tvůrce

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 23.3.2014 10:24

Nahoru Odpovědět

23.3.2014 10:23

Kolik jazyků umíš, tolikrát jsi programátor.

Zdeněk Pavlátka

Tvůrce

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.

Honza Bittner

Tvůrce

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 23.3.2014 10:39

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.

Neaktivní uživatel

Tvůrce

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

Libor Šimo (libcosenior)

Tvůrce

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.