我试图制作一个菜单,当您将鼠标悬停在其他菜单项上时,会从白色变为蓝色。我当时想使用不透明性,但是运气不好,您会提出什么建议?

I am using this code

的HTML

 <nav>
        <ul class="showcase">
        <li><a href="#" class="current">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
           <li><a href="#">5</a></li>

        </ul>
        </nav>​


的CSS

nav ul li a{
    font-size: 20px;
    font-family:Arial, Helvetica, sans-serif;
    color: black;
    text-transform:capitalize;
    font-weight:normal;
    display:block;    /* IE6, IE7 line height fix */
    padding:15px;
    background-color:transparent;
    margin-top:0px;
    margin-right:6px;
    text-decoration:none;
}
nav ul li a:hover{
    background-color: #43AEF2;
    padding:15px;
    color:white;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

nav ul li a.current{
    background-color:#43aef2 ;
    padding:15px;
    color:white;
    -moz-border-radius: 8px;
    border-radius: 8px;
}



JS

$("li").css('opacity', '1')
$(".selected").css('opacity', '.9')

$('ul.showcase').hover(

function() {
    $(this).find('li').stop().fadeTo(500, 1);
}, function() {
    $(this).find('li').stop().fadeTo(500, .8);
})​

最佳答案

无法100%确定您的例外结果,请尝试以下方法:

$("li").css('opacity', '0.40');
$(".selected").css('opacity', '1');

$('ul.showcase > li').hover(function () {
    $(this).stop().fadeTo(500, 1);
}, function () {
    $(this).not('.selected').stop().fadeTo(500, 0.40);
})​;​


试试这个小提琴:http://jsfiddle.net/fewds/mdamC/228/

关于javascript - js如何从白色变为蓝色?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14027730/

10-09 05:43