一个href . .A:链接;A:访问;干扰;图片链接

a href... a:link, a:visited, interfered with <a href> image link

本文关键字：链接 干扰 访问 一个 href      更新时间：2023-09-26

我在<head></head>中使用以下样式来显示我的菜单:

<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
li {
    float: left;
}
a:link, a:visited {
    display: block;
    width: 120px;
    font-weight: none;
    color: #FFFFFF;
    background-color: #98bf21;
    text-align: center;
    padding: 4px;
    text-decoration: none;   
}
a:hover, a:active {
    background-color: red;
}
</style>

现在的问题是，a:link, a:visited和a:hover, a:active，在我的div图像链接上显示一个框菜单。下面是代码:

<div id="content1">
 <a href="inside_page.html">
 <img src="images/adeliepenguin_250x200.jpg" alt="Adenlie Penguin" height="200" width="250"></a> 
</div>

我的问题是:是否有一种方法，我可以停止它显示菜单框我的图像div空间?

以下是index.html的完整代码: 
<!DOCTYPE html>
<html>
<head>
<title>Birds </title>
<link rel="stylesheet" type="text/css" href="birds2.css" />
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
li {
    float: left;
}
a:link, a:visited {
    display: block;
    width: 120px;
    font-weight: none;
    color: #FFFFFF;
    background-color: #98bf21;
    text-align: center;
    padding: 4px;
    text-decoration: none;   
}
a:hover, a:active {
    background-color: red;
}
</style>
</head>
<body>
<div id="container">
  <div class="menu">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">Birds In Danger</a></li>
      <li><a href="#news">Birds Habitants</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </div>
  <div id="flash"> Flash messaging area</div>
  <div id="content">
    <div id="content1">
     <a href="inside_page.html">
       <img src="images/adeliepenguin_250x200.jpg" alt="Adenlie Penguin" height="200" width="250">
     </a> 
    </div>
    <div id="content2"><img src="images/American_Goldfinch_250x200.jpg" alt="American Goldfinch" height="200" width="250"></div>
    <div id="content3"><img src="images/blue-jay-Glamour_250x200.jpg" alt="Blue Jay Glamour" height="200" width="250"></div>
    <div id="content4"><img src="images/american-robin-250x200.jpg" alt="Blue Jay Glamour" height="200" width="250"></div>
  </div>
   <div class="footer_menu">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">Birds In Danger</a></li>
      <li><a href="#news">Birds Habitants</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </div>
  <div id="footer"> Footer area</div>
</div>
</body>
</html>

这是你想要的吗?

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
}
.menu a:link,
a:visited {
  display: block;
  width: 120px;
  font-weight: none;
  color: #FFFFFF;
  background-color: #98bf21;
  text-align: center;
  padding: 4px;
  text-decoration: none;
}
.menu a:hover,
a:active {
  background-color: red;
}

为你的锚标签加上.menu类的前缀，这样它就只针对你的菜单了。

此处演示:http://jsfiddle.net/3vdh2dxL/1/

另外，我已经改变了你的页脚菜单，使用相同的.menu类。

相关文章：