Visualizzazione dei risultati da 1 a 2 su 2

Discussione: :hover non funziona

  1. #1
    Utente di HTML.it
    Registrato dal
    Jun 2008
    Messaggi
    1,317

    :hover non funziona

    codice:
    <style type="text/css">
        header {
            background: #fff;
        }
        nav > ul {
            float: left;
            list-style: none;
        }
        nav > ul > li {
            display: inline-block;
            float: left;
            cursor: pointer;
            background-color: #111;
            margin-left: 10px;
            padding: 40px;
            color: #fff;
            -webkit-transition: all 0.2s;
               -moz-transition: all 0.2s;
                    transition: all 0.2s;
    
        }
        nav > ul > li.active {
            background-color: #fff;
            color: #111;
            border: 1px solid #111;
        }
        nav > ul > li:hover {
            border-width: 20px;
            border-color: #fff;
        }
        nav > ul > li > i {
            font-size: 36px;
            width: 40px;
        }
        nav > ul > li > small {
            font-size: 13px;
            margin-left: -30px;
            margin-top: 10px;
            position: fixed;
        }
    </style>
    
    <header>
        <nav>
            <ul>
                <li class="active">
                    <i class="fi-home"></i>
                    <small>Main</small>
                </li>
    
                <li>
                    <i class="fi-graph-trend"></i>
                    <small>Statistics</small>
                </li>
    
                <li>
                    <i class="fi-database"></i>
                    <small>Database</small>
                </li>
            </ul>
        </nav>
    </header>
    Perchè l'effetto si applica solo al primo "li" ?

  2. #2
    Utente di HTML.it
    Registrato dal
    Jun 2008
    Messaggi
    1,317
    codice:
    <style type="text/css">
        header {
            background: #fff;
            width: 50%;
            margin: 20px auto;
        }
        nav ul {
            list-style: none;
            margin: 0;
        }
        nav > ul > li {
            width: 100px;
            height: 100px;
            cursor: pointer;
            background-color: #111;
            float: left;
            color: #fff;
            margin: 10px 0 0 5px;
            position: relative;
            text-decoration: none;
            font-size: 1.8em;
            -webkit-transition: all 0.5s;
               -moz-transition: all 0.5s;
                    transition: all 0.5s;
        }
        nav > ul > li > i {
            font-size: 40px;
            position: absolute;
            left: 35%;
            top: 30%;
        }
        nav > ul > li > small {
            font-size: 12px;
            position: absolute;
            left: 10%;
            bottom: 10%;
        }
        nav > ul > li > right {
            position: fixed;
            top: 10%;
            right: 10%;
        }
        nav > ul > li.active {
            background-color: #0DADEF;
        }
        nav > ul > li:not(.active):hover {
            color: #fff;
            background: #0DADEF;
        }
        nav > ul > li > ul {
            display: none;
        }
    
        
    </style>
    
    <header>
        <nav>
            <ul>
                <li class="active">
                    <i class="fi-monitor"></i>
                    <small>Home</small>
                </li>
    
                <li>
                    <i class="fi-graph-trend"></i>
                    <small>Statistics</small>
                </li>
    
                <li>
                    <i class="fi-database"></i>
                    <small>Database</small>
                    <ul>
                        <li>
                            <i class="fi-upload"></i>
                            <small>Import Hands</small>
                        </li>
    
                        <li>
                            <i class="fi-download"></i>
                            <small>Export Hands</small>
                        </li>
    
                        <li>
                            <i class="fi-wrench"></i>
                            <small>Optimize</small>
                        </li>
                    </ul>
                </li>
                
                <li class="right">
                    <i class="fi-play"></i>
                </li>
            </ul>
        </nav>
    </header>
    Risolto così...

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.