如何更改悬停菜单上的标题背景图像答案

【问题标题】：How to change header background image on hover menu如何更改悬停菜单上的标题背景图像
【发布时间】：2015-12-08 14:13:03
【问题描述】：

我一直在寻找一种在悬停菜单栏时更改横幅背景图像的方法。

这里有我的html

<div id="container">
    <header>
        <nav>
            <ul>
                <li>
                    <a href="index.html">home</a>
                </li>
                <li>
                    <a href="bedrijf.html">bedrijf</a>
                </li>
                <li>
                    <a href="diensten.html">diensten</a>
                </li>

                <li>
                    <a href="pictures.html">foto's</a>
                </li>
                <li><a href="contact-page.html">contacteer ons</a></li>

            </ul>
        </nav>
    </header>

所以我想做的是，当我将鼠标悬停在我的一个按钮上时，标题的背景应该变成我为此页面选择的图片。

我希望这可能会很棒。

【问题讨论】：

CSS 中没有父选择器（一般来说）。你需要脚本。 jQuery 包含在您的项目中吗？在这种情况下，这是微不足道的。
我宁愿不使用 jquere 或 javascript（这是为学校项目/为我父亲）
很公平。那么这真的是不可能的。 CSS 选择器可以沿着树向下，在某些情况下可以跨越，但不能向上。
我认为您应该查看一些 jquery/javascript 解决方案 (like this one)，因为我认为仅使用 css 是不可能的。
ok 感谢您回答我不会实施这个想法

标签： html css mousehover

【解决方案1】：

你可以在 jQuery 中做到这一点：

$("li > a").hover(function(){
 $("header").css("background-image", "img.jpg");
});

此代码表示，如果您将鼠标悬停在带有 a-Tag 且位于 li-Tag 中的元素上，那么它会将标题的背景图像更改为 img.jpg。

现在，如果您希望在不悬停时背景图像变回，那么也添加以下代码：

$("li > a").mouseleave(function(){
 $("header").css("background-image", "none");
});

【讨论】：

【解决方案2】：

当您将鼠标悬停在 LI 上时，您可以在 LI 上使用伪元素 (:before)。这有点 hacky，但也可以工作，而且也不需要 javascript。

这里的工作演示： http://jsfiddle.net/ezjjyptk/

【讨论】：

【解决方案3】：

这是我想出的解决方案。基本上，在每个 <li> 元素内添加一个空的、绝对定位的 div，然后在悬停时将其从标题后面向上移动。

JSFiddle

<div id="container">
  <header>
    <nav>
      <ul>
        <li>
          <a href="index.html">home</a>
          <div style="background:green">
          </div>
        </li>
        <li>
          <a href="bedrijf.html">bedrijf</a>
          <div style="background:yellow">
          </div>
        </li>
        <li>
          <a href="diensten.html">diensten</a>
        </li>

        <li>
          <a href="pictures.html">foto's</a>
        </li>
        <li><a href="contact-page.html">contacteer ons</a></li>

      </ul>
    </nav>
  </header>

header {
  position: relative;
  width: 100%;
  background: red;
}
ul li a {
  position: relative;
  z-index: 3;
}
ul li:hover div {
  z-index: 1;
}
ul li div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

【讨论】：

【解决方案4】：

我不会说没有 javascript 就不可能，但我当然不会称这段代码很漂亮

.fixed {
  position: absolute;
  top: 50px;
  left: 0;
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

li {
  display: inline-block;
}

.show1:hover + #header1 {
  opacity: 1;
}
.show2:hover + #header2 {
  opacity: 1;
}
.show3:hover + #header3 {
  opacity: 1;
}
.show4:hover + #header4 {
  opacity: 1;
}

<li>
  <a class="show1" href="index.html">Show 1</a>
  <img class="fixed" id="header1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Color_blocks.svg/800px-Color_blocks.svg.png" />
</li>
<li>
  <a class="show2" href="bedrijf.html">Show 2</a>
  <img class="fixed" id="header2" src="http://static1.squarespace.com/static/534d1b21e4b077040469bae0/t/5362730de4b04c365eb65a37/1398960956409/The+two+colour+shirt" />
</li>
<li>
  <a class="show3" href="diensten.html">Show 3</a>
  <img class="fixed" id="header3" src="http://i1.wp.com/makeapowerfulpoint.com/wp-content/uploads/2015/03/Drunk-Tank-Pink.png" />
</li>
<li>
  <a class="show4" href="pictures.html">Show 4</a>
  <img class="fixed" id="header4" src="http://3.bp.blogspot.com/-YFX5nFtmjiA/T7co_rB3keI/AAAAAAAAI0c/EkNV9tX3xt8/s920/color%2Bwheel%2Bstar%2Bblock%2Blogo%2Bv1.jpg" />
</li>

【讨论】：