Question

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

<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，我希望将图像归因于每个链接。我知道如何添加颜色而不是图像。

Answer 1

您可以将图像放在字幕中：

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

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

Answer 2

希望这可以帮助你：

见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;
}

如何使我的链接显示为图像，并使用悬停等方式更改它们？

2 个答案: