将鼠标悬停在绝对元素上时更改相对元素答案

【问题标题】：Change relative element while hover on absolute element将鼠标悬停在绝对元素上时更改相对元素
【发布时间】：2021-04-24 01:32:51
【问题描述】：

*
{
  margin: 0;
  padding: 0;
  
  list-style: none;
}

.navigation-menu
{
  display: flex;
  justify-content: space-around;
  background: #181818;
}
  
.navigation-menu li
{
  position: relative;
}

.navigation-menu li:hover .dropdown-menu
{
  display: block;
}

.navigation-menu a
{
  padding: 15px;
  text-decoration: none;
  color: #ffffff;
  display: block;
  text-transform: uppercase;
  font-family: arial;
  transition: .2s;
  font-weight: 600;
}

.navigation-menu a:hover
{
    background: #ffcc00;
    color: #181818;
}

.dropdown-menu
{
    position: absolute;
    top: 48px;
    left: 0;
    display: none;

    background: #181818;
}

<ul class="navigation-menu">
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li>
        <a href="#" class="dropdown-link">Social</a>
        <ul class="dropdown-menu">
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Google</a></li>
        </ul>
    </li>
</ul>

我怎样才能做出这样的事情？即当我将鼠标悬停在绝对 dropdown-menu 上时，相对 dropdown-link 应该应用下面的样式。

.dropdown-menu:hover .dropdown-link
{
    background: #ffcc00;
    color: #181818;
}

还是只能通过js解决？帮帮我。

Lorem ipsum dolor sit amet consectetur adipisicing elit。 Facere, saepe impedit distinctio！ Deleniti, quas id, quo ullaminvente repellendus delectus 在别名 unde minus adipisci consectetur ipsa aliquid maxime non nemo repudianae labore obcaecati odit omnis? Ipsam, iste commodi labourum iusto dolorum dolorem voluptatem, architecto ullam mollitia, facilis laudantium vel.

【问题讨论】：

试试这个 - stackoverflow.com/questions/5210033/…

标签： javascript html css

【解决方案1】：

我认为您可以将悬停添加到包含 li 并设置直系后代 a 的样式。见sn-p：

*
{
  margin: 0;
  padding: 0;
  
  list-style: none;
}

.navigation-menu
{
  display: flex;
  justify-content: space-around;
  background: #181818;
}
  
.navigation-menu li
{
  position: relative;
}

.navigation-menu li:hover .dropdown-menu
{
  display: block;
}

.navigation-menu a
{
  padding: 15px;
  text-decoration: none;
  color: #ffffff;
  display: block;
  text-transform: uppercase;
  font-family: arial;
  transition: .2s;
  font-weight: 600;
}

.navigation-menu a:hover
{
    background: #ffcc00;
    color: #181818;
}

.dropdown-menu
{
    position: absolute;
    top: 48px;
    left: 0;
    display: none;

    background: #181818;
}
/* add this: */
.navigation-item:hover > a {
    background: #ffcc00;
    color: #181818;
}

<ul class="navigation-menu">
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li class="navigation-item">
        <a href="#" class="dropdown-link">Social</a>
        <ul class="dropdown-menu">
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Google</a></li>
        </ul>
    </li>
</ul>

【讨论】：