التأثير على العنصر عند هوفر على الأب tailwind

الذي تحاول فعله بالضبط غير واضح، هل تحاول تطبيق خصائص معينة على العنصر الابن عند عمل هوفر على الاب؟

العنصر الأب هو عبارة list item داخله يوجد قائمة أردت جعلها تنسدل لما يمرر الماوس فوق العنصر الأب كما وضحت في الأعلى أخي عدنان لم أواجه مشكلة بإستخدام css لكن بإستخدام tailwind لم تضبط معي بحتث وجدت أنه يمكننا إستخدام group-hover على أي من العناصر الأبناء ليتم شيء ما لما يمرر الماس فوق أبوهم, وكما تلاحظ الأب عندي هو العنصر li صاحب الكلاس group

أريد لما يمرر الماوس فوقه اغيير اعدادات العنصر الإبن الذي اعطيناه الكلاس mega-menu  بحيث تظهر بعدما أخفيتها لم أواجه مشكلة بالcss لكن لم أعرف كيف استخدم ذلك بال tailwind

        <nav class="container relative">
            <a href="#" class="logo">Logo</a>
            <ul class="main-nav">
                <li><a class='' href="#">Home</a></li>
                <li><a class='' href="#">Other Links</a> </li>
                <li><a class='' href="#">Market</a></li>
                <li><a class='' href="#">About </a></li>
                <li><a class='' href="#">News</a></li>
                <li class="group"><a class='' href="#">Contact</a>
                  <div class="mega_menu">
                        <ul class="links">
                          <li><a href="#">Link-1</a></li>
                          <li><a href="#">Link-2</a></li>
                          <li><a href="#">Link-3</a></li>
                          <li><a href="#">Link-4</a></li>
                          <li><a href="#">Link-5</a></li>
                        </ul>
                  </div>
                </li>
            </ul>

        </nav>

يجب عليك إضافة group-hover إلى العناصر الأبناء لتصبح كالتالي:

<li class="group">
  <div class="hidden group-hover:block"> -->block تكون القائمة مخفية وعند تمرير المؤشر على العنصر الأب يتم تطبيق الخاصية
  .....
  </div>
</li>

وطبعاً يمكنك استخدام خاصية الشفافية كما في مثالك، ولكن عندها من الممكن أن تسبب بعض المشاكل لأن القائمة ستبقى موجودة ضمن الواجهة ولكن بشكل شفاف:

<li class="group">
  <div class="opacity-0 group-hover:opacity-100">
  .....
  </div>
</li>

تأكد من استعمالك لأحدث نسخة Tailwind CSS 3 ومابعد وإلا ستضطر لإضافة الخصائص التابعة لـ group-hover بشكل يدوي ضمن ملف إعدادات tailwind في مشروعك.

بتاريخ 8 ساعات قال Sam Ahw:

يجب عليك إضافة group-hover إلى العناصر الأبناء لتصبح كالتالي:

<li class="group">
  <div class="hidden group-hover:block"> -->block تكون القائمة مخفية وعند تمرير المؤشر على العنصر الأب يتم تطبيق الخاصية
  .....
  </div>
</li>

تأكد من استعمالك لأحدث نسخة Tailwind CSS 3 ومابعد وإلا ستضر لإضافة الخصائص التابعة لـ group-hover بشكل يدوي ضمن ملف إعدادات tailwind في مشروعك.

قلت لك في الأعلى إستخدمت الذي ذكرته أنت لكنني لم استخدم hidden  بل إستخدمت opacity و  z-index وبالcss عملت عادي أما tailwind لم تعمل معي, وتحققت من إصدار tailwind آخر إصدار أريد شرح عن كيفية إستخدام group-hover

بتاريخ 11 دقائق مضت قال Brahim Semmani:

قلت لك في الأعلى إستخدمت الذي ذكرته أنت لكنني لم استخدم hidden  بل إستخدمت opacity و  z-index وبالcss عملت عادي أما tailwind لم تعمل معي, وتحققت من إصدار tailwind آخر إصدار أريد شرح عن كيفية إستخدام group-hover

ما الذي لم يعمل معك بالضبط؟

حاولت تنفيذ الشيفرة على محاكي tailwind الموجود على الموقع الرسمي وألاحظ أنها تعمل بالشكل الصحيح:
(لتجريب الشيفرة على الموقع الرسمي للمكتبة https://play.tailwindcss.com/)

<nav class="container relative">
  <a href="#" class="logo">Logo</a>
  <ul class="main-nav">
    <li><a class="" href="#">Home</a></li>
    <li class="group">
      <a class="" href="#">Other Links</a>
      <div class="mega_menu z-[-1] opacity-0 group-hover:z-10 group-hover:opacity-100">
        <div class="image">
          <img class="hidden max-w-[18rem] md:flex" src="{{ asset('storage/Logo.png') }}" alt="" />
        </div>
        <ul class="links">
          <li><a href="#">Link-1</a></li>
          <li><a href="#">Link-2</a></li>
          <li><a href="#">Link-3</a></li>
          <li><a href="#">Link-4</a></li>
          <li><a href="#">Link-5</a></li>
        </ul>
        <ul class="links">
          <li><a href="#">Link-6</a></li>
          <li><a href="#">Link-7</a></li>
          <li><a href="#">Link-8</a></li>
          <li><a href="#">Link-9</a></li>
          <li><a href="#">Link-10</a></li>
        </ul>
      </div>
    </li>
    <li><a class="" href="#">Market</a></li>
    <li><a class="" href="#">About </a></li>
    <li><a class="" href="#">News</a></li>
    <li><a class="" href="#">Contact</a></li>
  </ul>
</nav>