jQuery to highlight on mouseover and dim other同级 elements

This example demonstrates how to use jQuery to highlight elements on mouse over and dim other同级 elements. Shared for everyone's reference, as follows:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta name="keywords" content="key words1，key words2，key words3etc"/>
    <title>Mouse over highlights, others dim</title>
    <style type="text/css">
      *{margin:0; padding:0;}
      ul,li{list-style:none;}
      ul{width:900px; height:200px; margin:100px auto;}
      li{width:200px; height:200px; display:inline-block; border:1px solid #d8d8d8; position:relative;}
      .addblack{width:200px; height:200px; display:none; background:#000;filter: alpha(opacity=10);-moz-opacity: 0.1; opacity: 0.1; position:absolute; left:0; top:0;}
    </style>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
         $(".index_Img").hover(function(){
           $(this).siblings().find(".addblack").show();
           },function(){
             $(this).siblings().find(".addblack").hide();
             $(this).find(".addblack").hide();
         }
      }
    </script>
  </head>
  <body>
    <ul>
      <li class="index_Img">
        Apple
        <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
      </li>
      <li class="index_Img">
        Banana
        <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
      </li>
      <li class="index_Img">
        Grape
        <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
      </li>
      <li class="index_Img">
        Pineapple
        <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
      </li>
    </ul>
  </body>
</html>

The running effect diagram is as follows:

Readers who are interested in more about jQuery-related content can check the special topics on this site: 'Summary of jQuery Switching Effects and Techniques', 'Summary of jQuery Traversal Algorithms and Techniques', 'Summary of jQuery Extension Techniques', 'Summary of jQuery Common Plugins and Usage', 'Summary of jQuery Drag and Drop Effects and Techniques', 'Summary of jQuery Table (table) Operation Techniques', 'Summary of Ajax Usage in jQuery', 'Summary of jQuery Classic Effects', 'Summary of jQuery Animation and Effect Usage', and 'Summary of jQuery Selector Usage'.

I hope the content described in this article will be helpful to everyone in jQuery programming design.

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please send an email to codebox.com (replace # with @ when sending an email) to report violations, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.

Basic Tutorial