Question

如何向li个事件上的所有mouseover个元素添加CSS，除了悬停的那个元素应该褪色？

CSS：

.tile_nav { width:241px; list-style:none;}
.tile_nav li { width:60px; height:60px; float:left;
 list-style:none; background:#ccc; margin:0 1px 1px 0;}
.tile_nav li a { width:60px; height:60px; display:block;}

JS：

$(document).ready(function() {
    $(".tile_nav li").mouseover(function() {
        $(this).css("opacity", ".5");
    });
    $(".tile_nav li").mouseout(function() {
        $(this).css("opacity", "1");
    });
});

HTML：

<ul class="tile_nav">
    <li><a href="#">Tile</a></li>
    <li><a href="#">Tile</a></li>
    <li><a href="#">Tile</a></li>
    <li><a href="#">Tile</a></li>
    <li><a href="#">Tile</a></li>
    <li><a href="#">Tile</a></li>
</ul>

Answer 1

你可以使用.siblings（）来设置兄弟元素的样式

$(document).ready(function () {
    $(".tile_nav li").hover(function () {
        $(this).siblings().css("opacity", .5);
    }, function () {
        $(this).siblings().css("opacity", 1);
    });
});

$(document).ready(function() {
  $(".tile_nav li").hover(function() {
    $(this).siblings().css("opacity", .5);
  }, function() {
    $(this).siblings().css("opacity", 1);
  });
});

.tile_nav {
  width: 241px;
  list-style: none;
}
.tile_nav li {
  width: 60px;
  height: 60px;
  float: left;
  list-style: none;
  background: #ccc;
  margin: 0 1px 1px 0;
}
.tile_nav li a {
  width: 60px;
  height: 60px;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="tile_nav">
  <li><a href="#">Tile</a></li>
  <li><a href="#">Tile</a></li>
  <li><a href="#">Tile</a></li>
  <li><a href="#">Tile</a></li>
  <li><a href="#">Tile</a></li>
  <li><a href="#">Tile</a></li>
</ul>

Answer 2

calendar-component

Answer 3

you can use this code
css:
 #all > ul {
            list-style: none;
            float: left;
            width: 200px;
            padding: 0 10px 0 0;
        }

        #all a {
            text-decoration: none;
            display: block;
            padding: 10px;
            background: #900;
            border-radius: 20px;
            color: white;
            text-align: center;
            margin: 0 0 5px 0;
            -webkit-transition: all 0.2s ease;
            -moz-transition: all 0.2s ease;
            -o-transition: all 0.2s ease;
        }

        #all:hover a {
            opacity: 0.2;
        }

        #all:hover ul:hover a {
            opacity: 0.5;
        }

            #all:hover ul:hover a:hover {
                opacity: 1;
            }

html:
<div id="page-wrap">

        <div id="all">

            <ul>
                <li><a href="#">---</a></li>
                <li><a href="#">---</a></li>
                <li><a href="#">---</a></li>
                <li><a href="#">---</a></li>
                <li><a href="#">---</a></li>
                <li><a href="#">---</a></li>
                <li><a href="#">---</a></li>
            </ul>

            <ul>
                <li><a href="#">---</a></li>
                <li><a href="#">---</a></li>
                <li><a href="#">---</a></li>
                <li><a href="#">---</a></li>
                <li><a href="#">---</a></li>
                <li><a href="#">---</a></li>
                <li><a href="#">---</a></li>
            </ul>

            <ul>
                <li><a href="#">---</a></li>
                <li><a href="#">---</a></li>
                <li><a href="#">---</a></li>
                <li><a href="#">---</a></li>
                <li><a href="#">---</a></li>
                <li><a href="#">---</a></li>
                <li><a href="#">---</a></li>
            </ul>

        </div>

    </div>

jquery :
$("#all ul li").hover(function() { // Mouse over
  $(this).siblings().stop().fadeTo(300, 0.6);
  $(this).parent().siblings().stop().fadeTo(300, 0.3); 
}, function() { // Mouse out
  $(this).siblings().stop().fadeTo(300, 1);
  $(this).parent().siblings().stop().fadeTo(300, 1);
});

元素的悬停效果

3 个答案: