Question

我正在努力实现这一目标：在我的导航中将我的元素悬停时，更改.background的背景颜色，我的代码是这样的：

        <li><a data-scroll href="#contact">Contact</a></li>
    </ul>
    <div class="background"></div>
</nav>

然而，当我告诉css更改ul悬停时的颜色时，颜色只会改变，如果我将鼠标悬停在a上.header-about时更改颜色无论我尝试什么，它都不会做任何事情。我试图尽可能清楚地解释这一点。

这是我的整个标记：

.header-nav .background {
  background: purple;
  position: absolute;
  width: 450px;
  height: 550px;
  top: 0;
  transition: all 0.3s;
}

.header-nav ul .header-about:hover {
  color: black;
}

.header-nav ul .header-about:hover + .background {
  background: #2F94CC;
}

<nav class="header-nav text-left">
  <ul>
    <li><a data-scroll href="#about" class="header-about">About</a></li>
    <li><a data-scroll href="#work">My work</a></li>
    <li><a data-scroll href="#resume">Resumé</a></li>
    <li><a data-scroll href="#contact">Contact</a></li>
  </ul>
  <div class="background"></div>
</nav>

我试图在解释问题时尽可能清楚。

Answer 1

在.background的鼠标悬停时，您无法使用CSS选择.header-about。但是，您可以按如下方式实现此目的：

$(function() {
  $('.header-nav ul a').hover(function() {
    $('.background').css('background', $(this).attr('data-color'));
  }, function() {
    $('.background').css('background', '');
  });
});

.header-nav .background {
  transition: all 0.3s;
  background: purple;
  position: absolute;
  width: 450px;
  height: 550px;
  z-index: -1;
  top: 0;
}

.header-nav ul li:hover {
  color: black;
}

.header-nav .background {
  background: #2F94CC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<nav class="header-nav text-left">
  <ul>
    <li><a data-scroll href="#about" data-color="#f00">About</a></li>
    <li><a data-scroll href="#work" data-color="#0f0">My work</a></li>
    <li><a data-scroll href="#resume" data-color="#05f">Resumé</a></li>
    <li><a data-scroll href="#contact" data-color="#f00">Contact</a></li>
  </ul>
  <div class="background"></div>
</nav>

Answer 2

您的下一个兄弟选择器'+'仅在背景div的位置如下时才有效：

<nav class="header-nav text-left">
    <ul>
        <li>
          <a data-scroll href="#about" class="header-about">About</a>
          <div class="background"></div>
        </li>
        <li><a data-scroll href="#work">My work</a></li>
        <li><a data-scroll href="#resume">Resumé</a></li>
        <li><a data-scroll href="#contact">Contact</a></li>
    </ul>
</nav>

因为它必须位于dom树中相同级别的选择器元素之后，并且位于所选元素旁边。

如果无法更改html中的定位，则可能需要使用javascript解决方案。

在悬停时更改底层div的背景

2 个答案: