Question

我的页面上有不同文字和图片的链接，带您回到主页，其他页面等等。我正在尝试更新它们，并发现当我将鼠标悬停在任何这些链接的项目上时它后面出现一个灰色条。我试过改变我的CSS代码的a：hover位但是还没能找到摆脱这种不良影响的方法。我最终希望它看起来像页面本身没有任何变化，但也许鼠标会在你悬停在链接上时发生变化。

总结样本：

HTML：

 <div id="example">
     <a href="homepage.html"><img src="images/thumbnail.jpg"></a>
     <h3><a href="contacts.html">Contact</a></h3>
 </div>

CSS：

a:link {color: #333; text-decoration: none;}
a:visited {text-decoration: none; color: #666;}
a:hover {text-decoration: none;color: #C30;}
a:active {text-decoration: none;}

div容器不包含会影响链接的措辞。解决方案可能非常简单，但到目前为止对此的搜索一直没有用。

Answer 1

像这样......？

http://jsfiddle.net/SinisterSystems/QHcP3/1/

 <div id="example">
     <a href="homepage.html"><img src="http://www.phawker.com/wp-content/uploads/2008/09/dudewtf.thumbnail.jpg" /></a>
     <h3><a href="contacts.html">Contact</a></h3>
 </div>

a:link {color: #333; text-decoration: none;}
a:visited {text-decoration: none; color: #666;}
a:hover {text-decoration: none;cursor:crosshair;}
a:active {text-decoration: none;}

Answer 2

如果您希望它们看起来相同，则您访问过的规则中的颜色应与您的：链接规则中的颜色相匹配。

a:visited {text-decoration: none; color: #666;}

应该是

a:visited {text-decoration: none; color: #333;}

当我添加某个链接时，如何防止不必要的更改？

2 个答案: