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

您没有将<div id="here"></div>（点）放在.之前。由于这是一个类，因此必须在css文件中使用mw-portlet-body（点）。

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

Answer 2

定位类时，需要向其添加.前缀。目前，您的CSS正在定位<li>标签内的<mw-portlet-body></mw-portlet-body>个元素：

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

但是，这不是您想要的。通过向.添加mw-portlet-body，您可以告诉CSS mw-portlet-body是元素上的类，因此它将选择类{的元素中的所有<li>元素{1}}

请参见下面的工作示例：

mw-portlet-body

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

Answer 3

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

悬停在类的[li]元素上

3 个答案: