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;
    }

Answer 2

如果您只想要我的礼物具有悬停效果，请尝试以下操作：

<a href="#" class="hover-able">My Gifts</a>

然后添加这个 CSS：

a.hover-able:hover {
    /* hover style here */
}

并且不要将此类添加到其他元素

Answer 3

在您的 css 文件中，您可以添加

.add a{
    background:transparent
}