النتائج 1 إلى 1 من 1

الموضوع: معالجة الحدث hover على اثنين من div رئيسيتين

  1. #1
    عضو نشيط جدا
    تاريخ التسجيل
    Apr 2008
    المشاركات
    361

    معالجة الحدث hover على اثنين من div رئيسيتين



    السلام عليكم،

    في البداية عند تحميل الصفحة يتم اظهار الديفين الرئبسيين مع اختيار العنوان h3 رقم 1 في كليهما واظهاره بلون مختلف.

    http://majallati.comli.com/test/div3hover/d3h8.php

    المشكلة :

    اريد عندما يتم تحريك الفارة فوق العنوان الثاني في div1 يتم اختيار h3 الثاني مع عدم تغيير وضعية العنوان الاول في div2 والمحافظة عليه.

    ولكن مشكلتي انا ان العنوان الاول في div2 يتغير حاله الى not selected .

    كيف يمكن لي حل هذه المشكلة بكود جي كويري الموجود في الصفحة :

    كود PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar" lang="ar">
    <
    head>
        <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <
    title>تبويب عمودي</title>
        <
    meta name="description" lang="fr" content="تجريب تبويب عمودي بالجي كويري" />
        <
    style type="text/css" media="screen">
            
    body {
                
    font-size90%;
                
    font-familyarialhelveticasans-serif;
            }
            
    h1 {text-aligncentercolor#f00;}
            
    h3 {
            
    text-alignleft;
            
    color#f00;
            
    font-size12px;
            }
            .
    articles {
            
    position relative;
            
    border1px solid #000;
            
    width352pxheight 123px;
            }
            .
    articles h3, .articles h3 a {color#ebfff3; background-color: #36425a;}
            /*.hasJS .articles {min-height:200px;}*/
            
    .hasJS .articles h3 {
                
    cursorpointer;
                
    background-color#36425a;
                
    margin0;
                
    padding5px;
                
    border-bottom:  #fff 1px solid;
                
    border-right:  #fff 1px solid;
                
    width:190px;
                
    height:30px;
            }
            .
    hasJS .articles h3.selected {
            
    background-color#7385a3;
            
    border-right#fff 1px solid;
            
    }
            .
    hasJS .articles div div.show_img {positionabsolutetop0right0left196px; }
            .
    hasJS .articles div div {positionabsolutetop: -5000pxleft: -5000pxpadding-left5px;}
            .
    imag {    width:150pxheight:122px;}
            
    a:linka:visiteda:active{text-decorationnone;color#333333;}
        
    </style>
        <
    script type="text/javascript">
            
    document.documentElement.className+=" hasJS";
        
    </script>
    </head>

    <body>
           <h1>التبويب العمودي</h1>
           <h2>سلسلة من h3 بتبويب افقي</h2>
           <div class= "articles" id="articles_1"">
           <div class="article">
                           <h3 class="selected"><a href="#">الكوريتان تتفقان على إجراء مباحثات بشأن لم شمل العائلات</a></h3>
                           <div class="show_img">
                                   <img class="imag"src="news_1.jpg" alt="الصورة 1" />
                           </div>
                   </div>
                   <div class="article">
                           <h3><a href="#">ساحل العاج: كوليبالي يلقى حتفه على يد "حلفاء أمس"</a></h3>
                           <div>
                                   <img class="imag" src="news_2.jpg" alt="الصورة 2" />
                   </div>
                   </div>
                   <div class="article">
                           <h3><a href="#">باحثون كنديون يخترعون هاتفا ورقيا جديدا</a></h3>
                           <div>
                                   <img class="imag" src="news_3.jpg" alt="الصورة 3" />
                           </div>
                   </div>
           </div>
           <br /><br />
           <div class= "articles" id="articles_2">
                   <div class="article">
                           <h3 class="selected"><a href="#">الكوريتان تتفقان على إجراء مباحثات بشأن لم شمل العائلات</a></h3>
                           <div class="show_img">
                                   <img class="imag"src="news_1.jpg" alt="الصورة 1" />
                           </div>
                   </div>
                   <div class="article">
                           <h3><a href="#">ساحل العاج: كوليبالي يلقى حتفه على يد "حلفاء أمس"</a></h3>
                           <div>
                                   <img class="imag" src="news_2.jpg" alt="الصورة 2" />
                   </div>
                   </div>
                   <div class="article">
                           <h3><a href="#">باحثون كنديون يخترعون هاتفا ورقيا جديدا</a></h3>
                           <div>
                                   <img class="imag" src="news_3.jpg" alt="الصورة 3" />
                           </div>
                   </div>
           </div>
           <script type="text/javascript" src="jquery-1.5.2.js"></script>
           <script type="text/javascript">
                           $(document).ready( function () {
                                   //tabindex للعمل بلوحة المفاتيح
                                   $(".articles h3").attr("tabindex", "0");
                                   $(".articles h3").focus (
                                           function () {
                                                   //اشياء نقوم بها عند الحدث focus فوق h3
                                                   $(".articles div.show_img").removeClass("show_img");
                                                   $(".articles h3.selected").removeClass("selected");
                                                   $(this).next("div").addClass("show_img");
                                                   $(this).addClass("selected");
                                           }
                                   );
                                   //
                                   //
                                   $('.articles').hover(function(){
                                           var num = $(this).attr('id').substr(9); // نهاية الـ id ابتداء من الحرف التاسع
                                           if ( /^[0-9]{1,4}$/.test(num) ) { // يتم اكمال العملية الا اذا كان لدينا رقم
                                                   var $articles = $('articles_' + num); // نقوم باسترجاع DIV للمنطقة المؤشر عليها
                                                   // نبدأ العمل
                                                   $articles.focus();

                                           // معالجة الـ hover على h3 :
                                                   $("div.article h3").hover(
                                                           function () {
                                                                   //اشياء نقوم بها اثناء الحدث  over على h3
                                                                   $(".articles div.show_img").removeClass("show_img");
                                                                   $(".articles h3.selected").removeClass("selected");
                                                                   $(this).next("div").addClass("show_img");
                                                                   $(this).addClass("selected");
                                                           },
                                                           function () {
                                                                   //out : الاشياء التي نقوم بها اثناء خروج المؤشر من المنطقة
    h3
                                                           }
                                                   );
                                           }
                                   }
                                   );
                                   //

                           });
           </script>
    </body>
    </html> 
    شكرا مسبقاً.





    التعديل الأخير تم بواسطة apitos ; 08-05-2011 الساعة 02:33 PM
    __________________
    مجلتي الصغيرة






ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  

أضف موقعك هنا| اخبار السيارات | حراج | شقق للايجار في الكويت | بيوت للبيع في الكويت | دليل الكويت العقاري | مقروء | شركة كشف تسربات المياه | شركة عزل اسطح بالرياض | عزل فوم بالرياض| عزل اسطح بالرياض | كشف تسربات المياة بالرياض | شركة عزل اسطح بالرياض