0

我正在尝试模拟文本“悬挂”在酒吧上并在悬停时摆动。这是我目前获得的代码的 JSfiddle：http: //jsfiddle.net/VRTAf/。如您所见，悬停时的旋转没有变化。我究竟做错了什么？

这是我的代码。

HTML：

<div id="chandelier">
                <nav>
                    <ul id="chandelier-list">
                        <li id="logo-home"><a href="#home" class="scrollPage">home</a></li>
                        <li id="logo-about"><a href="#about" class="scrollPage">about us</a></li>
                        <li id="logo-range"><a href="#range" class="scrollPage">our range</a></li>
                        <li id="logo-contact"><a href="#contact" class="scrollPage">contact us</a></li>
                        <li id="logo-blog"><a href="#blog" class="scrollPage">blog</a></li>
                    </ul>
                </nav>
            </div>

CSS：

#chandelier nav ul li {
    position: absolute;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    writing-mode: lr-tb;

    -webkit-transform-origin: right top;
    -moz-transform-origin: right top;
    -ms-transform-origin: right top;
    -o-transform-origin: right top;
    transform-origin: right top;

    font-size: 18px;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.swing1 { -webkit-transform: rotate(-80deg); -moz-transform: rotate(-80deg); -o-transform: rotate(-80deg); transform: rotate(-80deg); }
.swing2 { -webkit-transform: rotate(-97deg); -moz-transform: rotate(-97deg); -o-transform: rotate(-97deg); transform: rotate(-97deg); }
.swing3 { -webkit-transform: rotate(-85deg); -moz-transform: rotate(-85deg); -o-transform: rotate(-85deg); transform: rotate(-85deg); }
.swing4 { -webkit-transform: rotate(-92deg); -moz-transform: rotate(-92deg); -o-transform: rotate(-92deg); transform: rotate(-92deg); }
.swing5 { -webkit-transform: rotate(-89deg); -moz-transform: rotate(-89deg); -o-transform: rotate(-89deg); transform: rotate(-89deg); }

#logo-home { top: 0; left: -32px; }
#logo-about { top: 0; left: -17px; }
#logo-range { top: 0; left: 14px; }
#logo-contact { top: 0; left: 48px; }
#logo-blog { top: 0; left: 135px; }

#chandelier nav ul li a {
    text-decoration: none;
}
#chandelier nav ul { 
    list-style-type: none;
}

JS：

$('#chandelier nav ul li').hover(
function () {
    $(this).addClass('swing1');
    $(this).addClass('swing2');
    $(this).addClass('swing3');
    $(this).addClass('swing4');
    $(this).addClass('swing5');
},
function () {
    $(this).removeClass('swing5');
}
);
4

0 回答 0