Question

我无法弄明白如何制作它，以便当我将鼠标悬停在链接上时，沿着我已经拥有的一条线在链接下方出现一个小的橙色三角形。这与html和css有关。

- - - - - - - - HTML

<div id='links'>
  <ul>
    <li><a href='#'>home</a></li>
    <li><a href='#'>interests</a></li>
    <li><a href='#'>game</a></li>
    <li><a href='#'>about</a></li>
    <li><a href='#'>contact</a></li>
  </ul>
</div>

- - - - - - - - CSS

div#links {
background: url('images/links_bg.gif') no-repeat right;
height: 75px;
margin: 0px;
}
div#links ul {
float: right;
list-style: none;
margin: 48px 35px 0px 0px;
}
div#links ul li {
display: inline;
margin: 0px;
}
div#links ul li a {
color: #e5e4e4;
font-size: 12px;
text-decoration: none;
margin: 0px 15px 0px 15px;;
}
div#links ul li:hover {
background: url('images/link_triangle.png') no-repeat;
font-weight: bold;
}

我还有所有链接的背景图片。我认为问题在于，由于每个链接基本上都是文本框，因此无法为其提供超出该框的背景。我只是不知道如何解决它。

Answer 1

您可以使用jQuery在div上使用position: absolute在链接下方的单独mouseover内显示图片。

Answer 2

我只是不得不乱用填充物而不是一会儿。最终得到了它。谢谢你的帮助。

如何在悬停期间将链接背景置于其下方？

2 个答案: