Question

我对我正在制作的网站图片有这个问题。我一直在尝试不同的方法来解决它，这是我迄今为止发现的最好的方法。不过，这不是我需要的。我有8个按钮，我需要用更大的图像替换第二个按钮。问题是，它将其他人拉下来，我希望它超过他们。有办法吗？这就是我在编码中所做的：

<a href="index.html">
<input type="image" src="hp-homebutton.png" alt="submit" style="position: relative;" value="Home Button"/> </a> <p>
<img src="hp-monthsbutton.png" onmouseover="this.src='hp-months.png'" onmouseout="this.src='hp-monthsbutton.png'" style="position: relative;"/> <p>
<img src="hp-forumbutton.png" style="position: relative;"/> <p>
<img src="hp-newsbutton.png" style="position: relative;"/> <p>
<img src="hp-contactbutton.png" style="position: relative;"/> <p>
<input type="image" src="hp-eventsbutton.png" alt="submit" style="position: relative;" value="Events Button" onclick="showImage();"/> <p>
<img src="hp-gallerybutton.png" style="position: relative;"/> <p>
<img src="hp-extrasbutton.png" style="position: relative;"/> <p>

Answer 1

现在我正确地理解了你想要实现的目标，你需要将你的图像包裹在元素中，并给予父元素一个固定的高度。然后，您可以为图片添加z-index，以确保在屏幕上显示正确的图像。查看下面的演示，我稍微更改了HTML以证明原理。

<强> JSFiddle Demo

<强> HTML

<ul>
    <li><a href="index.html"><img src="http://s21.postimg.org/hzb9gge93/hp_homebutton.png" alt="Home" /></a></li>
    <li><a href="#"><img src="http://s21.postimg.org/bbentuuqv/hp_monthsbutton.png" alt="Months" onmouseover="this.src='http://s21.postimg.org/8ssyt690n/hp_months.png'" onmouseout="this.src='http://s21.postimg.org/bbentuuqv/hp_monthsbutton.png'" class="months" /></li>
    <li><a href="#"><img src="http://s21.postimg.org/rer4tnw9z/hp_forumbutton.png" alt="Forum" /></li>
    <li><a href="#"><img src="http://s21.postimg.org/ig12gmrdz/hp_newsbutton.png" alt="News" /></li>
</ul>

<强> CSS

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

ul li {
    clear: both;
    height: 54px;
}

ul li img {
    position: relative;
    z-index: 1;
}

ul li .months {
    z-index: 2;
}

鼠标悬停图像将其他图像拉下来

1 个答案: