goldenflower

hover کردن عناصر

3 پست در این موضوع قرار دارد

سلام به همه دوستان

سوالم اینه:

مثلا ما سه تا div داریم به صورت زیر:


<div class="div-1">
<div class="div-2">
<div class="div-3">

در ابتدا هرسه دارای opacity:1 باشن یعنی حالت معمولی ، حالا من میخوام وقتی موس رفت روی یکی از این ها دوتا div دیگه opacity:0.8 داشته باشن. یعنی عنصری که موس روش رفت تغییری نکنه و دوتای دیگه opacityـــشون کم بشه.

اگه ممکنه کد چنین چیزی رو در اختیارم قرار بدید و لطفا یکم توضیح هم بدید تا بتونم استفاده کنم.

باتشکر

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

شما می تونید از + در سلکتور استفاده کنید.

یا اینکه می تونید کدها رو به این صورت بنویسید:


<div class="father">
<div class="div-1">
<div class="div-2">
<div class="div-3">
</div>

و این استایل رو براش به کار ببرید:


.father:hover div{
opacity:0.1;
}
.father div:hover{
opacity:1;
}

یعنی اینطوری:



<style>
.father:hover div{
opacity:0.1;
}
.father div:hover{
opacity:1;
}
</style>
<div class="father">
<div class="div-1"></div>
<div class="div-2"></div>
<div class="div-3"></div>
</div>

ویرایش شده در توسط پویابهروش
3

به اشتراک گذاری این پست


لینک به پست

ممنون از توضیحات کامل و بی نقصتون.

اولش جواب نداد ، یه خورده با کدها سروکله زدم تا اشکال کارم رو پیدا کردم و درست شد :)

یه دنیا تشکر :wub:

1

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط mamadja
      سلام خدمت مهندسین گرامی
      بنده یه پوسته HTML دارم که قصد دارم پله به پله خودم اون رو تبدیل به یک پوسته وردپرسی کنم . این پوسته ای رو که دانلود کردم به قسمت فراخوانی اسکریپت ها رسیدم طبق آموزش هایی که دیدم و کارایی که انجام دادم درست اسکریپت های مورد نظر فراخوانی نمیشن ، یعنی مطابق فایل Html که دانلود کردم نیستند . حتی فایل function.php رو هم درست کردم و تغییرات لازم را انجام دادم اما متاسفانه نتونستم ... 
      فایل ها رو آپلود میکنم تا اونجایی که پیش رفتم . هم فایل اصلی HTML هم پوشه Theme که دارم وردپرسش میکنم اگر کسی میتونه کمکم کنه و اسکریپت ها رو فراخوانی کنه ممنون میشم .
      *بنده در نظر دارم این پوسته رو تبدیل به یک پوسته وردپرسی فروش گیفت کارت تبدیل کنم و در نهایت با استفاده از ووکامرس یک فروشگاه تبدیل بشه .. اگه اساتید نظری در این رابطه دارن که این پوسته اصلا به درد همچین کاری میخوره یا نه راهنمایی کنه ممنون میشم .. ( قرار نیست آنلاین شه و بالا بیاد جهت آموزش خودم هدف گذاری کردم )
      سپاس
      Gifti.rar
      gift-wp.rar
    • توسط unid_user
      سلام دوستان
      من میخوام وقتی روی تگ p در اصطلاح hover میکنم. محتوایی که در before نوشتم تغیرات دلخواه رو انجام بده. ولی اصلا کار نمیکنه! لطفا کمک کنید.
      <div class="text-right text-border"> <h4>آموزش ربات مسیرباب</h4> <p> لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. </p> </div> این هم از کدهای css
      .text-border p::before { content: "مقاله آموزشی"; position: absolute; width: auto; height: auto; background-color: darkgoldenrod; top: -10px; left: 5px; border-radius: 2px; z-index: -1; padding: 0px 10px; } .text-border p:hover .text-border p::before { top: -20px; }  
    • توسط Rasoul
      سلام
      من میخواستم وقتی صفحه اسکرول میشه و هدر همراهش میاد پایین به هدر یه لگو مثلا اضافه بشه میدونم باید با جاوااسکریپ انجام بشه ولی من این زبان را تا این حد بلد نیستم ممنون میشم راهنماییم کنید.
      الان تو این دمو میخوام وقتی اسکرول میشه کنار My Header یک لوگو اضافه بشه و وقتی دوباره میبری بالا حذف بشه.
       
      دمو
    • توسط acc
      سلام دوستان
      بنده علاقمند هستم که فونت و استایل یک ویجت خارجی که مربوط به چت انلاین هست رو تغییر بدم , ایا این به وسیله جاوا امکان پذیر است؟
      اگر از دوستان کسی در این زمینه مهارت دارد لطفا من را راهنمایی کند
       
      با تشکر
    • توسط Monica
      باسلام ، ی select option دارم
      من میخوام با jQuery ترجیحا ajax بتونم طبق انتخاب کاربر بخش مربوطه رو نمایش بدم
      کدهای منو ببینید 
      // صفحه اصلی index.php <script> jQuery(document).ready(function($) { jQuery('#select123').change(function() { jQuery('.content123').hide(); jQuery('#' + jQuery(this).val()).show(); }).trigger("change"); }); </script> <select id="select123">  <option value="content1" selected>content1</option> <option value="content2">content2</option> <option value="content3">content3</option> <option value="content4">content4</option> </select> * توجه: میخوام وقتی صفحه بالا ران میشه text defult show بطور پیش فرض نمایش داده بشه
      صفحه my-page.php
      //my-page.php <div id="content1" class="content123"> text defult show </div> <div id="content2" class="content123"> contentttttttt </div> <div id="content3" class="content123"> content3 </div> <div id="content4" class="content123"> content4 </div>