Vue中使用Tailwind构建导航菜单时hover效果不符合预期的问题

你当前的代码里，hover:bg-indigo-100是直接加在所有<li>的固定class里，所以不管菜单项是否被选中，鼠标hover时都会触发这个样式。要实现仅未选中项有hover效果，只需要把hover样式移到动态class的判断逻辑里即可：

修改后的代码：

<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 cursor-pointer" 
              :class="selectedNav==item.name 
                ? 'font-bold text-gray-100 bg-[#0175f6]' 
                : 'hover:bg-indigo-100'">
             <div v-html="item.icon"></div> 
             <a href="#">{{ item.name }}</a>
          </li>
       </ul>
    </div>
</div>

关键修改点： #

• 从<li>的固定class中移除hover:bg-indigo-100
• 在动态class的else分支（未选中状态）添加hover:bg-indigo-100

这样处理后，只有未被选中的菜单项会在hover时显示bg-indigo-100背景，选中的菜单项不会再触发hover样式，符合需求。

内容的提问来源于stack exchange，提问作者user824624