元素的悬停效果

Question

How to add CSS to all li elements on mouseover event except the hovered one, which should be faded?

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

You can .siblings() to style the sibling li elements

$(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

You did almost correctly.
Just using siblings you need to do.
$(document).ready(function() {
    $(".tile_nav li").mouseover(function() {
       $(this).siblings().css("opacity", .5);
    });
    $(".tile_nav li").mouseout(function() {
        $(this).siblings().css("opacity", 1);
    });
});

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