انجمن‌های فارسی اوبونتو

لطفاً به انجمن‌ها وارد شده و یا جهت ورود ثبت‌نام نمائید

لطفاً جهت ورود نام کاربری و رمز عبورتان را وارد نمائید


توزیع گنو/لینوکس اوبونتو ۲۰ ساله شد 🎉

« قبلی بعدی »
صفحه: [1]   پایین

نویسنده موضوع: تغيير رنگ عناصر هنگام چرخش mouse با css , javascript  (دفعات بازدید: 1939 بار)

0 کاربر و 2 مهمان درحال مشاهده موضوع.

آفلاین rahmani

  • Sr. Member
  • *
  • ارسال: 291
تغيير رنگ عناصر هنگام چرخش mouse با css , javascript
« : 22 آبان 1390، 05:53 ب‌ظ »
سلام

فرض كنيد فهرستي از مقالات در سايت موجود است مي خواهيم وقتي كاربر با mouse  ان ها را پيماش مي كند مقاله اي كه اكنون mouse بر روي آن قرار دارد متمايز باشد

نحوه انجام اين كار با javascript  , cssچگونه است

مثلا در css دو كلاس ايجاد كرده ايم كه يكي براي حالت عادي (usual) و ديگري براي حالت متمايز hilight است:

.usual{
color : blue;
font-weight : hilight;
.
.
.
}

hilight {
color : skyblue;
font-weight : normal;
}
حال چگونه با javascript اين كلاس ها را به رديف هايي كه onmouseover و onmouseout مي شوند نسبت دهيم
در ضمن ممكن است براي نمايش اين رديف ها بجاي از استفاده شده باشد.
متشكرم
« آخرین ویرایش: 06 آذر 1390، 10:35 ق‌ظ توسط rahmani »
خارج شده است
اگر در صحنه حق و باطل زمان خويش نيستي، هر جا كه خواهي باش....
 دكتر علي شزيعتي مزيناني

آفلاین esfahan2000

  • Full Member
  • *
  • ارسال: 214
  • VA)(ID
پاسخ به: تغيير رنگ عناصر با چرخش mouse با javascript
« پاسخ #1 : 23 آبان 1390، 12:11 ب‌ظ »
یه همچین کاری را با html چند سال قبل انجام دادم با دستور on mouse شما یک کم در همین مورد توی گوگل بگردی به راحتی ‍پیداش میکنی...
خارج شده است
چترها را باید بست/زیر بارن باید رفت/فکر را خاطره را زیر باران باید برد/با همه مردم شهر زیر باران باید رفت/دوست را زیر باران باید دید

آفلاین مرد مرده

  • Sr. Member
  • *
  • ارسال: 371
  • جنسیت : پسر
  • So Close No Matter How Far
    • وب نوشت های مرد مرده
پاسخ به: تغيير رنگ عناصر هنگام چرخش mouse با css , javascript
« پاسخ #2 : 06 آذر 1390، 05:15 ب‌ظ »
با jquery  راحت میتونی اینکار رو انجام بدی :

کد: [انتخاب]
<html>
<head>
    <title></title>
    <style type="text/css">
        .dvContent { padding: 10px; border: 1px solid #d7d7d7; }
        .clsHover { background-color: yellow; }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.dvContent').hover(
                    function(){ $(this).addClass('clsHover'); },
                    function(){ $(this).removeClass('clsHover'); });
        });
       
    </script>
</head>
<body>
    <div class="dvContent">first div</div>
    <div class="dvContent">second div</div>
    <div class="dvContent">third div</div>

</body>
</html>
خارج شده است
صفحه: [1]   بالا
« قبلی بعدی »
 

© ۱۳۸۴ - ۱۴۰۲ جامعه فارسی‌زبان اوبونتو
© ۲۰۲۴ شرکت کنونیکال. اوبونتو و کنونیکال نام‌های تجاری متعلق به Canonical Ltd هستند