0

我使用 CSS3 在我的网站中为 :hover 设置动画 - 当我在 Firefox 中运行它时,导航动画很完美,文本从左侧滑入 - 但是在 Chrome 和 Safari 中,它似乎不像在 Firefox 中那样做动画. 在 chrome 中,它似乎来自底部?

你可以在这里看到我的例子(它是左侧导航):http ://www.wearewebstars.dk/frontend/Navigation/boerneunivers.html

导航的 HTML 是:

        <div class="left-navigation fixed">
        <nav class="left">
            <ul id="nav">
                <li class="li-blue">
                    <div class="border-left"></div>
                    <a href="#page1" class="left-link nav-blue" data-page="page1">
                        <div class="nav-icon"><img src="assets/css/boerne-img/menu/icon-blue.png" alt="" title="" /></div>
                        <span class="nav-text">Myanmar</span>
                    </a>
                </li>
                <li class="li-darkred">
                    <div class="border-left"></div>
                    <a href="#page2" class="left-link nav-darkred" data-page="page2">
                        <div class="nav-icon"><img src="assets/css/boerne-img/menu/icon-darkred.png" alt="" title="" /></div>
                        <span class="nav-text">Storbyen</span>
                    </a>
                </li>
                <li class="li-orange">
                    <div class="border-left"></div>
                    <a href="#page3" class="left-link nav-orange" data-page="page3">
                        <div class="nav-icon"><img src="assets/css/boerne-img/menu/icon-orange.png" alt="" title="" /></div>
                        <span class="nav-text">Skolen</span>
                    </a>
                </li>
                <li class="li-purple">
                    <div class="border-left"></div>
                    <a href="#page4" class="left-link nav-purple" data-page="page4">
                        <div class="nav-icon"><img src="assets/css/boerne-img/menu/icon-purple.png" alt="" title="" /></div>
                        <span class="nav-text">Klostre & Munke</span>
                    </a>
                </li>
                <li class="li-green">
                    <div class="border-left"></div>
                    <a href="#page5" class="left-link nav-green" data-page="page5">
                        <div class="nav-icon"><img src="assets/css/boerne-img/menu/icon-green.png" alt="" title="" /></div>
                        <span class="nav-text">Landsbyen</span>
                    </a>
                </li>
                <li class="li-brown">
                    <div class="border-left"></div>
                    <a href="#page6" class="left-link nav-brown" data-page="page6">
                        <div class="nav-icon"><img src="assets/css/boerne-img/menu/icon-brown.png" alt="" title="" /></div>
                        <span class="nav-text">Floden</span>
                    </a>
                </li>
                <li class="li-red">
                    <div class="border-left"></div>
                    <a href="#page7" class="left-link nav-red" data-page="page7">
                        <div class="nav-icon"><img src="assets/css/boerne-img/menu/icon-red.png" alt="" title="" /></div>
                        <span class="nav-text">Din hjælp</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>

导航的 CSS 是:

.left-navigation { width: auto; }   
.left-navigation h2 { background: transparent url(img/left-menu-h2.png) repeat-x; box-shadow: 0 3px 5px 0px #444; font-size:11px !important; padding: 7px 10px; display:inline-block; text-transform:uppercase; color:#FFF; margin-bottom:4px;  }
.left-navigation.fixed { z-index:1000; position:fixed; left:0; top:20%;}    
.left-navigation ul { margin-bottom:40px !important;}
.left-navigation ul,
.left-navigation ul li{ padding:0; margin:0; list-style:none; font-weight:bold;}

    .left-navigation ul li { 
        background: transparent url(boerne-img/menu/bg-li.png) top right no-repeat; 
        margin-bottom:-10px; 
        display:table; 
        position:relative; 
        width:auto; 
        overflow:hidden; 
        height:55px; 
        padding: 0 20px 0 10px; 
        -webkit-transition: width .3s ease-in-out;
        -moz-transition: width .3s ease-in-out;
        -o-transition: width .3s ease-in-out;
        transition: width .3s ease-in-out;
    }

    .left-navigation ul li:not(.current) {
        width:35px; 
        display:block;
        min-width:35px !important;
    }

    .left-navigation ul li:hover { 
        min-width:35px !important;
        width:auto;
        -webkit-transition: width .3s ease-in-out;
        -moz-transition: width .3s ease-in-out;
        -o-transition: width .3s ease-in-out;
        transition: width .3s ease-in-out;
    }

    .left-navigation ul li a,
    .left-navigation ul li a:hover{ text-decoration:none;}

    .left-navigation ul li span.nav-text { /*display:inline-block;*/ position:relative; left:-250px; z-index:1; }
    .left-navigation ul li:hover span.nav-text { left:0;}
    .left-navigation ul li.current span.nav-text { left:0;}
    .left-navigation ul li:hover span.nav-text,
    .left-navigation ul li.current span.nav-text{ padding-left:10px; color:#000; }

    .left-navigation ul li .nav-icon { padding: 9px 0 0 0; display:inline-block; position:relative; z-index:2;}
    .left-navigation ul li a.nav-blue .nav-icon { padding: 8px 0 0 0; }

    /* Safari Hack */
    html[xmlns*=""]:root .left-navigation ul li:hover { width:100% !important;}
    *|html[xmlns*=""] .left-navigation ul li:hover { width:100% !important;}

    /* Border styles for left-nav */ 
    .left-navigation ul li.li-blue .border-left {
        border-left: 5px solid #004C73;
        display: inline-block;
        height: 45px;
        margin-left: -10px;
        margin-top: 5px;
        float:left;
    }
    .left-navigation ul li.li-darkred .border-left {
        border-left: 5px solid #750809;
        display: inline-block;
        height: 45px;
        margin-left: -10px;
        margin-top: 5px;
        float:left;
    }
    .left-navigation ul li.li-orange .border-left {
        border-left: 5px solid #dc5928;
        display: inline-block;
        height: 45px;
        margin-left: -10px;
        margin-top: 5px;
        float:left;
    }
    .left-navigation ul li.li-purple .border-left {
        border-left: 5px solid #d89fbc;
        display: inline-block;
        height: 45px;
        margin-left: -10px;
        margin-top: 5px;
        float:left;
    }
    .left-navigation ul li.li-green .border-left {
        border-left: 5px solid #a5cd41;
        display: inline-block;
        height: 45px;
        margin-left: -10px;
        margin-top: 5px;
        float:left;
    }
    .left-navigation ul li.li-brown .border-left {
        border-left: 5px solid #ae8f48;
        display: inline-block;
        height: 45px;
        margin-left: -10px;
        margin-top: 5px;
        float:left;
    }
    .left-navigation ul li.li-red .border-left {
        border-left: 5px solid #f03307;
        display: inline-block;
        height: 45px;
        margin-left: -10px;
        margin-top: 5px;
        float:left;
    }
4

1 回答 1

1

知道了

in .left-navigation ul lichange width:35px element intomax-width:35px; 和 in .left-navigation ul li:hover change width:autointomax-width:500px;

这会起作用

于 2013-09-12T12:45:18.417 回答