链接图像不稳固

我不知道如何解释发生了什么，但是我在我的网站上有一个徽标图像，并且当您将其悬停在其中一部分上时，它的工作原理正确，但是如果您将鼠标悬停在某些其他部分它不像一个链接。它随机作用，所以它不像图像的一半只是一个链接，或者它像悬停在字母“P”上，它的作品悬停在“进入”它不工作悬停在“KT”它再次工作标识上写着“Pink Tangerine”）。链接图像不稳固

这是一个透明背景的PNG，所以我想知道它是否有这样的东西，但这没有任何意义。我从来没有遇到过这样的问题，你们能告诉我什么是错的吗？

HTML5

<div id="main-banner"> 
    <header> 
     <a id="image" href="index.html"> 
      <img alt="Logo" src="Images/PT-logo.png"> 
     </a>   
     <nav> 
      <ul> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="About_Us/about.html">About Us</a></li> 
       <li><a href="Contact_US/contact.html">Contact Us</a></li> 
      </ul> 
     </nav> 
    </header> 
</div>

CSS3

我不想像我的大部分CSS的应该是相关的，但我包括在公正的情况下所有的链接描述和主要页眉/旗帜的东西。处理图像的一个类位于CSS的底部，并且只有这样，所以我将鼠标悬停在图像上时不会出现奇怪的边框。

/*Link Info */ 

a { 
    text-decoration: none; 
    color: #DB7093; 
} 

a:link, a:visited { 
    text-decoration: none; 
    color: #FFC0CB; 
} 

a:hover, a:active { 
    text-decoration: none; 
    background-color: #DB7093; 
    color: #F0F8FF; 
} 

/*Banner Navigation*/ 

#main-banner { 
    width: 100%; 
    height: 110px; 
    padding: 25px 0 0; 
    background-color: #FFC0CB; 
} 

#main-banner header { 
    width: 70%; 
    margin: auto; 
} 

#main-banner header img { 
    width: 300px; 
    height: 100px; 
    float: left; 
    margin-left: 10%; 
} 

#main-banner header nav { 
    position: relative; 
    height: 20px; 
    left: 105px; 
    top: 50px; 
} 

#main-banner header nav ul { 
    list-style: none; 
    margin: auto; 
} 

#main-banner header nav ul li { 
    float: left; 
    display: inline; 
} 

#main-banner header nav li a:hover { 
    background-color: #DB7093; 
    color: #F0F8FF; 
    text-shadow: none; 
} 

#main-banner header nav ul li a { 
    color: #DB7093; 
    display: block; 
    padding: 3px 15px; 
    height: 12px; 
} 

/*Image Links*/ 

a#image { 
    background-color: transparent; 
}

来源

2014-01-13 SecretWalrus

问题是否出现在这个演示中？我的猜测是，页面上的其他元素会遮挡徽标图像的一部分，但我在这里看不到。 http://jsfiddle.net/isherwood/bL2j6/ – isherwood

导航标签看似引起了链接的失误，因为我在这里看到它http://jsfiddle.net/7FBXL/ – Charles380

是的，它在演示中发生，悬停以x为例。 – SecretWalrus

所以问题是导航标签和左/顶/高CSS样式，因为它的容器是相同的图像链接，所以有重叠。

删除左侧/顶部/高度修复它，如所见here。这取决于你的最终目标是什么，为了解决它，仍然有你想要的外观。

#main-banner header nav { 
    position: relative;  
}

编辑：我想使用一些余量移动的元素会得到你想要的东西，只是不知道在哪里安置应该去。

来源

2014-01-13 16:37:37 Charles380

有趣的是，谢谢你指出这一点，我从来没有发生过这种情况，并且我已经使用了这种编码过程了好几次。 – SecretWalrus

多亏了Charles380指出的东西。我把图像做成绝对的，只是导航相对的，所以我可以像我想要的那样移动它。谢谢你们的帮助。

来源

2014-01-13 17:30:26 SecretWalrus

链接图像不稳固

回答

相关问题