Question

在我的页面中，我有两种类型的链接，文本链接和图像链接。对于文本链接，我已经定义了以下CSS规则：

a:link, a:visited{
    text-align: right;
    text-decoration:none;
    color: #ccb771;
}   
a:hover, a:active{
    color: #333300;
    border-bottom: 2px solid #333300;
    padding-bottom: 0.25em;
}

对于文字链接，一切正常！但对于图像链接，当鼠标移过图像时会添加下划线。我添加了此代码来定义图像链接的新规则：

.bodyimage a:link, a:visited, a:hover, a:active{
border: none;
padding-bottom: 0px;

}

但是此规则会覆盖以前的链接，而下划线则不显示文本链接。我该怎么办？

对不起我糟糕的英语！

Answer 1

问题是边界被分配给（悬停）链接。为了在存在图像时删除它，您需要一个不存在的父选择器，即您需要说 - 如果此链接包含img，则从父a中删除边框1}}

父选择器通常是希望的，并且可以使用JS：）

解决方法的方法是将{class 1}}或a:hover

作为目标之一进行分类（添加类）

有点像这样......

<强> CSS：

a:hover img

HTML：

a:link, a:visited{
    text-align: right;
    text-decoration:none;
    color: #ccb771;
}

a:hover, a:active{
    color: #333300;
    padding-bottom: 0.25em;
}

a img {border: 0;}

a.txt:hover, a.txt:active {
    border-bottom: 2px solid #333300;
}

如果图像链接较少，则最好对包含图像的链接进行分类..

Answer 2

尝试将其放入CSS：

img
{
    border:0;
}

删除您的bodyimage课程。如果这不起作用，请尝试：

img
{
    border:0 !important;
    padding:0 !important;
}

Answer 3

很抱歉，如果我遗漏了某些内容，但您是否有理由使用border-bottom为文本添加下划线？如果你使用文字装饰：下划线，你的文字会加下划线，而图像却没有。这不是你想要的吗？

如果您只想将鼠标悬停在链接上时想要此效果，则需要：

a {
  text-decoration:none;
  color: #ccb771;
}
a:hover {
  text-decoration:underline;
  color: #333300;
}
a img {
  border:none;
}

这应该可以为您提供所需的颜色，并在保留图像下划线的同时为文本加下划线。

HTML CSS，链接定义，删除链接中的图像边框

3 个答案: