0

如何使我的链接显示为图像，并通过悬停等方式更改它们？我已经有了按钮图像。基本上，我正在制作的网站非常基本，但很好。我遇到的一个问题是我的导航栏。导航栏有四个链接，我希望它们显示为图像，并随着悬停而变化。链接在一个无序列表中 - 它看起来像这样：

<ul class="navbar">
  <li><a href="Home Page.html">Home page</a>
  <li><a href="Information.html">Information</a>
  <li><a href="Forum.html">Forum</a>
  <li><a href="Interests.html">Interests</a>
</ul>

我有 CSS，我希望将图像归因于每个链接。我知道如何添加颜色但不知道图像。

4

2 回答 2

1

您可以像这样在标题中放置图像：

<a href="#">
<img src="images/yourImage.png" alt="Your Image">
</a>

然后，您可以在图像悬停后使用 jquery 更改图像的来源。

于 2013-04-27T04:34:10.277 回答
0

希望这可以帮助你：

请参阅http://jsbin.com/acuhuy/5/edit

  <div id="nav">
    <ul id="menu">
      <li class="menu-item"><a href="Home Page.html">Home Page</a></li>
      <li class="menu-item"><a href="Information.html">Information</a></li>
      <li class="menu-item"><a href="Forum.html">Forum</a></li>
      <li class="menu-item"><a href="Interests.html">Interests</a></li>
    </ul>
  </div>

CSS

div#nav{
  position:relative;
}
ul#menu{

}
li.menu-item{
  list-style:none;
  position:relative;
  float:left;
  width:80px;
  height:27px;
  padding-top:2px;
  margin-right:5px;
  text-align:center;
  background-image:url('http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_black_rectangle.png');
  background-size:80px 27px;
  background-repeat:no-repeat;
  cursor:pointer;

}
li.menu-item a{
    text-decoration:none;
    color:#f0f0f0;
}

li.menu-item:hover{
  opacity:0.8;
}
于 2013-04-27T04:50:50.763 回答