Opacity en LI

by Carlos Quintero

HTML

<div id="areas">    
            <ul>
                <li id="programacion">Programacion</li>
                <li id="sistemas">Sistemas</li>
                <li id="dweb">Diseño web</li>
                <li id="software">Software</li>
            </ul>
        </div>
        <div id="contenidos">
            <ul>
                <li class="prog">jQuery</li>
                <li class="sist">Linux</li>
                <li class="web">CPanel</li>
                <li class="prog">PHP</li>
                <li class="soft">Photoshop</li>
                <li class="prog">Bash</li>
                <li class="web">WordPress</li>
                <li class="sist">iOS</li>
                <li class="prog">Java SE 8</li>
            </ul>
        </div>

JavaScript

$(document).ready(function(){
    $('div#areas #programacion').mouseover(function(){
            $('#contenidos li').not('.prog').css({"opacity":"0.2"});
    })
    .mouseout (function(){
            $('#contenidos li').css({"opacity":"1"});
    })
    $('div#areas #sistemas').mouseover(function(){
            $('#contenidos li').not('.sist').css({"opacity":"0.2"});
    })
    .mouseout (function(){
            $('#contenidos li').css({"opacity":"1"});
    })
    $('div#areas #dweb').mouseover(function(){
            $('#contenidos li').not('.web').css({"opacity":"0.2"});
    })
    .mouseout (function(){
            $('#contenidos li').css({"opacity":"1"});
    })
    $('div#areas #software').mouseover(function(){
            $('#contenidos li').not('.soft').css({"opacity":"0.2"});
    })
    .mouseout (function(){
            $('#contenidos li').css({"opacity":"1"});
    })
});