1

他のメニューにカーソルを合わせると、白から青に変化するメニューを作ろうとしています。不透明度を使うことを考えていましたが、運が悪かったので、何を提案しますか？

私はこのコードを使用しています

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);
})​
4

4 に答える 4

2

例外的な結果について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/

于 2012-12-25T04:49:45.133 に答える
1

css3を使用しているので、ホバーにトラニション効果を使用することを検討できます。例：

nav ul li a:hover{
    -webkit-transition: background-color linear 1s;
    -moz-transition: background-color linear 1s;
    -ms-transition: background-color linear 1s;
    transition: background-color linear 1s;
    background-color: #43AEF2;
    padding:15px;
    color:white;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

そして、リンクをクリックした後：

$('ul li a').on('click',function(){
    $(this).parents('ul').find('li a').removeClass('current');
    $(this).addClass('current');
});

JSFiddle

于 2012-12-25T09:01:28.350 に答える
0

私は@elclanrsの提案に行きますが、あなたのコードでは、なぜ各li要素の代わりにul全体を選択するのか疑問に思っています

$('ul.showcase li').hover(
  function() {
    $(this).fadeTo(500, 1);
}, function() {
    $(this).fadeTo(500, .8);
})​
于 2012-12-25T04:44:56.347 に答える
0

代わりに「ホバー」私は「mouseenter」と「mouseleave」を好みます http://jsfiddle.net/mdamC/226/

    $('ul.showcase li').mouseenter(function() {
        $(this).stop().fadeTo(1,1);
    })
    $('ul.showcase li').mouseleave(function() {
        $(this).stop().fadeTo(1,0.4);
    })
于 2012-12-25T04:49:05.200 に答える