为什么我的锚标签不显示悬停样式？

发布于 2025-01-23 08:47:37 字数 1181 浏览 4 评论 0原文

当我徘徊在列表项目上时，这些样式是我试图应用于LI元素的样式。但是这些样式到目前为止尚未出现。我在做什么错？

#menu-ul a:hover {
  border-bottom: 2px solid black;
}

#menu-ul a:focus {
  border-bottom: 2px solid black;
}

<ul id="menu-ul">
          <span class="menu-item-selection">
            <a href="#" id="brunch"><li>Brunch</li></a>
          </span>
          <span class="menu-item-selection">
            <a href="#" id="bowls"><li>Bowls</li></a>
          </span>
          <span class="menu-item-selection">
            <a href="#" id="beverages"> <li>Beverages</li></a>
          </span>
          <span class="menu-item-selection">
            <a href="#" id="salads"> <li>Salads</li></a>
          </span>
          <span class="menu-item-selection">
            <a href="#" id="desserts"> <li>Desserts</li></a>
          </span>
        </ul>

原文

These are the styles I am trying to apply on the li elements when I hover over the list items. But these styles don't appear as of now. What am I doing wrong?

#menu-ul a:hover {
  border-bottom: 2px solid black;
}

#menu-ul a:focus {
  border-bottom: 2px solid black;
}

<ul id="menu-ul">
          <span class="menu-item-selection">
            <a href="#" id="brunch"><li>Brunch</li></a>
          </span>
          <span class="menu-item-selection">
            <a href="#" id="bowls"><li>Bowls</li></a>
          </span>
          <span class="menu-item-selection">
            <a href="#" id="beverages"> <li>Beverages</li></a>
          </span>
          <span class="menu-item-selection">
            <a href="#" id="salads"> <li>Salads</li></a>
          </span>
          <span class="menu-item-selection">
            <a href="#" id="desserts"> <li>Desserts</li></a>
          </span>
        </ul>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我不会写诗 2025-01-30 08:47:37

所有修复您的结构的拳头：＆lt; span＆gt;不能成为＆lt; ul＆gt;元素的孩子。
这应该看起来像这样：

<ul id="menu-ul">
  <li class="menu-item-selection"> 
    <a href="#" id="brunch">Brunch</a>
  </li>
  <li class="menu-item-selection"> 
    <a href="#" id="bowls">Bowls</a>
  </li>
  ...
</ul>

Fist of all fix your structure: <span> can't be a child of <ul> element.
This should look like this:

<ul id="menu-ul">
  <li class="menu-item-selection"> 
    <a href="#" id="brunch">Brunch</a>
  </li>
  <li class="menu-item-selection"> 
    <a href="#" id="bowls">Bowls</a>
  </li>
  ...
</ul>

回复收藏 0 原文

撞了怀 2025-01-30 08:47:37

您应该针对LI元素，而不是A元素：

#menu-ul a:hover li{
    border-bottom: 2px solid black;
}

#menu-ul a:focus li{
    border-bottom: 2px solid black;
}

You should target the li element, and not the a element:

#menu-ul a:hover li{
    border-bottom: 2px solid black;
}

#menu-ul a:focus li{
    border-bottom: 2px solid black;
}

回复收藏 0 原文

旧伤慢歌 2025-01-30 08:47:37

您可以将其修复，仅针对li A：Hover，但我会更改HTML结构

#menu-ul a:hover {
  border-bottom: 2px solid black;
}

#menu-ul a:focus {
  border-bottom: 2px solid black;
}

 <ul id="menu-ul">
          <li>
            <span class="menu-item-selection">
              <a href="#" id="brunch">Brunch</a>
            </span>
          </li>
          <li>
          <span class="menu-item-selection">
            <a href="#" id="bowls">Bowls</a>
          </span>
          </li>
          <li>
          <span class="menu-item-selection">
            <a href="#" id="beverages">Beverages</a>
          </span>
          </li>
</ul>

You can fix it with just targetting to li after a:hover but I would change html structure

#menu-ul a:hover {
  border-bottom: 2px solid black;
}

#menu-ul a:focus {
  border-bottom: 2px solid black;
}

 <ul id="menu-ul">
          <li>
            <span class="menu-item-selection">
              <a href="#" id="brunch">Brunch</a>
            </span>
          </li>
          <li>
          <span class="menu-item-selection">
            <a href="#" id="bowls">Bowls</a>
          </span>
          </li>
          <li>
          <span class="menu-item-selection">
            <a href="#" id="beverages">Beverages</a>
          </span>
          </li>
</ul>

回复收藏 0 原文

~没有更多了~