将鼠标悬停在 class 的 [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>

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

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

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

或li.mw-portlet-body:hover

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

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

Answer 1

您唯一需要做的就是添加一个点来引用 class（例如 .mw-portlet-body li 而不是 mw-portlet-body li）

Answer 2

当定位 class 时，您需要为其添加 . 前缀。目前，您的 css 正在针对 <mw-portlet-body></mw-portlet-body> 标签内的 <li> 个元素：

<mw-portlet-body>
 <li></li>
 <li></li>
</mw-portlet-body>

然而，这不是您想要的。通过将 . 添加到 mw-portlet-body，您告诉 css mw-portlet-body 是元素上的 class，因此它将 select 所有 <li> 元素里面的任何带有 class mw-portlet-body

的元素

请参阅下面的工作示例：

.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>

Answer 3

您没有在 mw-portlet-body 之前放置 .（点）。由于它是 class，因此您必须在 css 文件中使用 .（点）。

.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>

将鼠标悬停在 class 的 [li] 元素上

hover over an [li] element of a class

html

css

mediawiki