Question

当我悬停菜单栏时，我一直在寻找改变横幅背景图片的方法。

这里有你的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>

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

我希望这可能会很棒。

Answer 1

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

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

此代码表示如果将鼠标悬停在带有li-Tag的--Tag的元素上，则会将标题的背景图像更改为img.jpg。

现在，如果你想要将背景图片改回来，如果你不悬停，那么也添加这个代码：

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

Answer 2

当您将鼠标悬停在LI上时，可以在LI上使用伪元素（:before）。它有点hacky，但确实有效，没有javascript。

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

Answer 3

这是我提出的解决方案。基本上，在每个request.getContextPath();元素中添加一个空的，绝对定位的div，并在悬停时从标题后面向上移动。

JSFiddle

<li>

Answer 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>

如何在悬停菜单上更改标题背景图像

4 个答案: