html - 导航悬停背景错误

Question

ul 列表有问题:

<ul>
    <li>
        <a href="#">My Gifts</a>
        ...code... 
        <div class="add">
            <a href="#">add</a>
        </div>
    </li>
</ul>

当我将鼠标悬停在“我的礼物”链接上时，它会显示之后的内容。当我悬停“我的礼物”时，我的背景图像显示在“我的礼物”后面。

它也坚持“添加”链接，我怎样才能分开或者如何让只有“我的礼物”链接获得悬停效果？

Answer 1

这将只选择第一个 a，因为它没有包含在 div 中

li > a:hover {
     background-color: red;
    }