EN VI

Css - Not expected hover effects in tailwind in menu?

How to Css - Not expected hover effects in tailwind in menu

I am applying tailwind in vue to build a navigation.

 <div class="px-2 w-56">
    <div class="bg-[#dce3ef40] rounded-lg my-2">
       <ul class="space-y-0">

          <li v-for="item in solutions" :key="item.name" :href="item.href" class="px-4 py-2 flex space-x-4   items-center hover:bg-indigo-100 cursor-pointer" :class="selectedNav==item.name ? 'font-bold text-gray-100 bg-[#0175f6]' : '' ">
             <div v-html="item.icon"></div> 
             <a href="#">{{ item.name }}</a>
          </li>

       </ul>
    </div>

 </div>

the effects can be seen here: https://play.tailwindcss.com/8p7VnSbmEl This is what the menu looks like as

the hover effects on the selected menu item is like this.

What I expect is the hover can only work for the non-selected item.

Solution:

You can use the pointer-events-none utility class on the selected element. By using it you can prevent any hover effects from being triggered on the active element in your menu. Also, if you want the hover effects to be re-enabled when the active state changes, you should revert the pointer-events property to its default value with the pointer-events-auto utility class.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.8/vue.global.min.js"></script>
<div class="px-2 w-56">
  <div class="bg-[#dce3ef40] rounded-lg my-2">
    <ul class="space-y-0">
      <li 
        v-for="item in solutions" 
        :key="item.name" 
        :href="item.href" 
        class="px-4 py-2 flex space-x-4   items-center hover:bg-indigo-100 cursor-pointer"
        :class="selectedNav==item.name ? 'font-bold text-gray-100 bg-[#0175f6] pointer-events-none' : 'pointer-events-auto'">
        <div v-html="item.icon"></div>
        <a href="#">{{ item.name }}</a>
      </li>
    </ul>
  </div>
</div>