Question

I have the below style in my <head></head> to display my menu:

<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>

The problem now is, a:link, a:visited AND a:hover, a:active, is displaying a box menu on my div image link. Here is the code:

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

My question is: Is there a way I can stop it to display that menu box my image div space?

Here is the full code of the 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>

Answer 1

这是你想要的吗？

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类为您的锚标记添加CSS，因此它只会定位您的菜单。

在这里演示：http://jsfiddle.net/3vdh2dxL/1/

另外，我更改了页脚菜单以使用相同的.menu类。

a href ... a：link，a：已访问，干扰了<a href=""> image link

1 个答案: