html - 将鼠标悬停在类的 [li] 元素上

Question

我想将鼠标悬停在 mediawiki 中的导航栏上。

站点代码:

<div class="mw-portlet-body">
  <ul>
    <li id="n-mainpage-description">
      <a href="/index.php/Hauptseite" title="Hauptseite besuchen       [Alt+Umschalt+z]" accesskey="z">
        <span>Hauptseite</span>
      </a>
    </li>
    <li id="n-recentchanges">
      <a href="/index.php/Spezial:Letzte_%C3%84nderungen" title="Liste der letzten Änderungen in diesem Wiki [Alt+Umschalt+r]" accesskey="r">
        <span>Letzte Änderungen</span>
      </a>
    </li>
    <li id="n-randompage">
      <a href="/index.php/Spezial:Zuf%C3%A4llige_Seite" title="Zufällige Seite aufrufen [Alt+Umschalt+x]" accesskey="x">
        <span>Zufällige Seite</span>
      </a>
    </li>
    <li id="n-help-mediawiki">
      <a href="https://www.mediawiki.org/wiki/Special:MyLanguage/Help:Contents">
        <span>Help about MediaWiki</span>
      </a>
    </li>
  </ul>
</div>

悬停应该使用类 mw-portlet-body 和类的 li 元素。我还不知道元素的规模，希望它自动扩展到新的 li 元素，所以使用 id 是不可能的。

我已经搜索了一下并尝试了一些 CSS 代码:

mw-portlet-body li:hover {
    background-color: rgba(242, 242, 242, 1);
}

或li.mw-portlet-body:hover

我不知道现在该做什么。我不知道/不想更改站点的整个 HTML 代码以将类添加到列表中。

非常感谢任何帮助，我最近才开始进行 Web 开发。

Answer 1

您没有在 mw-portlet-body 之前放置 .(点)。由于它是一个类，因此您必须在 css 文件中使用 .(dot)。

.mw-portlet-body li:hover {
background-color: rgba(242, 242, 242, 1);
}

<div class="mw-portlet-body">
  <ul>
    <li id="n-mainpage-description">
      <a href="/index.php/Hauptseite" title="Hauptseite besuchen       [Alt+Umschalt+z]" accesskey="z">
        <span>Hauptseite</span>
      </a>
    </li>
    <li id="n-recentchanges">
      <a href="/index.php/Spezial:Letzte_%C3%84nderungen" title="Liste der letzten Änderungen in diesem Wiki [Alt+Umschalt+r]" accesskey="r">
        <span>Letzte Änderungen</span>
      </a>
    </li>
    <li id="n-randompage">
      <a href="/index.php/Spezial:Zuf%C3%A4llige_Seite" title="Zufällige Seite aufrufen [Alt+Umschalt+x]" accesskey="x">
        <span>Zufällige Seite</span>
      </a>
    </li>
    <li id="n-help-mediawiki">
      <a href="https://www.mediawiki.org/wiki/Special:MyLanguage/Help:Contents">
        <span>Help about MediaWiki</span>
      </a>
    </li>
  </ul>
</div>