2. Fórumok
  3. Szoftverfejlesztés
  4. HTML szerkesztés
  5. (kiemelt téma)

Hirdetés

Új hozzászólás Aktív témák

  • #7037 mArZsi tag
    Új Válasz #7037
    Új hozzászólás
    Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra
    Privát üzenet küldése

    mArZsi

    tag

    Sziasztok!

    Egy kis segítséget kérnék. Hogyan lehet megoldani azt, hogy ha rámegyek menu1 vagy menu2-re, akkor az ikon is vele változzon? Fordítva működik (ha az ikonra megyek, akkor a szöveg is változik)
    Előre is köszönöm! :R

    HTML:
    <!DOCTYPE html>
    <html lang="en" >

    <head>
    <meta charset="UTF-8">
    <title>Proba</title>
    <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
    <ul class="menu">
    <li><img src="icons/1.png" alt="icon1" class="icon" style="width:32px" align="left"> <span><a href="menu1.html">menu1</a></span></li>
    <li><img src="icons/2.png" alt="icon2" class="icon" style="width:32px" align="left"> <span><a href="menu2.html">menu2</a></span></li>
    </ul>
    </body>
    </html>

    CSS:
    body,
    body * {
    transition: all 300ms ease-out;
    }
    body {
    background-color: #000;
    }
    body ul.menu {
    position: absolute;
    }
    body ul.menu li {
    color: #5f5f5f;
    list-style-type: none;
    font-size: 48px;
    }
    body ul.menu li:hover{
    color: #fff;
    cursor: pointer;
    letter-spacing: 5px;
    }
    a:hover, a:visited, a:link, a:active {
    text-decoration: none;
    color: inherit;
    }
    a:hover{
    color: inherit;
    }
    img {
    margin-right: 150px;
    margin-top: 14px;
    }
    .icon {
    width: 100px;
    position: relative;
    opacity: 0.5;
    }
    .icon:hover {
    transform: scale(1.3, 1.3);
    opacity: 1;
    }

    [ Szerkesztve ]

Új hozzászólás Aktív témák