наведите курсор на элемент [li] класса - PullRequest
Новая
       11

наведите курсор на элемент [li] класса

0 голосов
/ 28 января 2019

Я хочу навести курсор мыши на панель навигации в 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, поэтому использование идентификатора не подлежит сомнению.

Я уже немного искал и пробовал некоторые коды CSS: 

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

или li.mw-portlet-body:hover

Я не уверен, что делать прямо сейчас.Я не знаю / не хочу изменять весь HTML-код сайта для добавления классов в списки.

Я очень ценю любую помощь, я начал заниматься веб-разработкой совсем недавно.

Ответы [ 3 ]

0 голосов
/ 28 января 2019

При нацеливании на класс вам нужно добавить к нему префикс ..На данный момент ваша 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> внутри любого элемента с классом 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>
0 голосов
/ 28 января 2019

Вы не поставили . (точка) до mw-portlet-body.Поскольку это класс, вы должны использовать . (точка) в файле 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>
0 голосов
/ 28 января 2019

Единственное, что вам нужно сделать, это добавить точку для обозначения класса (например, .mw-portlet-body li вместо mw-portlet-body li)

...