непрозрачность элемента списка 0,7 за исключением активных элементов - PullRequest
Новая
       7

непрозрачность элемента списка 0,7 за исключением активных элементов

1 голос
/ 24 октября 2011

Я изменил элементы списка с непрозрачностью 0,7, что работает нормально. В этом же списке у меня есть элемент списка с классом и идентификатором «активный».

Это означает, что непрозрачность активного элемента списка равна 1, но это не сработает.

Это jQuery: 

            $("#active").css({ opacity: 1 });
            $(".nav_top ul li a").css({ opacity: 0.7 });

            $(".nav_top ul li a").hover(function()
            {
                $(this).animate({ opacity: 1 });
            },
            function()
            {
                $(this).animate({ opacity: 0.7 });
            });

Это список: 

<div class="nav_top">
    <ul>
<li class="active"><a href="#">item 1</li>
<li><a href="#">item 2</li>
<li><a href="#">item 3</li>
<li><a href="#">item 4</li>
<li><a href="#">item 4</li>

Ответы [ 2 ]

1 голос
/ 24 октября 2011

Вы можете сделать все это с помощью CSS и небольшого количества jQuery 

<div class="nav_top">
    <ul>
        <li class="active"><a href="#">item 1</a></li>
        <li><a href="#">item 2</a></li>
        <li><a href="#">item 3</a></li>
        <li><a href="#">item 4</a></li>
        <li><a href="#">item 4</a></li>
    </ul>
</div>

и используйте эти кросс-браузерные стили непрозрачности: 

.nav_top li {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
}

.nav_top li.active {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    -khtml-opacity: 1.0;
    opacity: 1.0;
}

и немного jQuery 

// hover on the li, not the a, since the li has the class
$(".nav_top ul li").hover(function() {
    $(this).animate({ opacity: 1 });
}, function() {
    $(this).animate({ opacity: 0.7 });
});
0 голосов
/ 24 октября 2011 
// Global "all are 0.7 opacity" rule
// exclude the li with the active class though [:not(.active)]
$(".nav_top ul li:not(.active) a")
  // change items to 0.7 opacity
  .css({ opacity: 0.7 })
  // and bind to hover
  .hover(function(){
      $(this).animate({ opacity: 1 });
  },function(){
      $(this).animate({ opacity: 0.7 });
  });

Пара вещей:

  1. Обязательно закройте свои якорные (<a></a>) теги)
  2. Вы можете использовать :not(), чтобы исключить active класс <li>

Демоверсия найдена здесь: http://jsfiddle.net/xJF7X/2/

...