7

悬停时，我的文本链接有下划线。这是 Bootstrap 中的默认设置。

我想保留这个，除非链接在某个 div 内。

我尝试过的代码（以及几种变体）不起作用。

的HTML：

        <div class="wall-entry span5">
            <a href="">
            <img src="http://www.placehold.it/290x163" />
            <div class="wall-address">
                <p>Burgundy Street</p>
                <p>New Orleans, LA</p>
                <p>USA</p>
            </div>
            </a>
        </div>

我的 CSS：

.wall-entry     {
                background-color: @black;
                position: relative;

            img {
                opacity:0.4;
                filter:alpha(opacity=40); /* For IE8 and earlier */
                }

            div {
                position: absolute;
                left: 10px;
                bottom: 10px;
                p   {
                    line-height: 18px;
                    margin: 0;
                    font-family: Neuzit Heavy;
                    font-size: 18px;
                    color: white;
                    text-decoration: none;
                    }
                }
            }


div.wall-entry:hover img    {
                            opacity:1;
                            filter:alpha(opacity=100); /* For IE8 and earlier */                    
                            }

a div.wall-entry {text-decoration: none;}

快速说明：我已经测试过a {text-decoration: none;}，这确实有效。但是，我不想改变一切。只是这种特定情况下的链接。

4

4 回答 4

8

对于涉及多个单词的字体，将 font-family 放在引号中，首先：

font-family: "Neuzit Heavy", sans-serif;

然后放在a下面.wall-entry a:hover { text-decoration: none; }

你有顺序调换。您要定位的项目应该在右侧。例如，

.wrapper .header a在英文中的意思是“定位在 .header 内的所有锚链接，在 .wrapper 内”

于 2012-04-30T22:04:26.620 回答
2

这个问题实际上是由 Twitter Bootstrap 的 CSS 文件引起的，而不是你的代码。

Twitter Bootstrap 的 CSS 文件（bootstrap.min.css 是我项目的罪魁祸首）多次给出链接下划线。当它们悬停在它们上时，当它们被聚焦时，它会给它们一个下划线，甚至使它们变成蓝色。

在我的项目中，我专门为锚标记内的文本分配了我自己的颜色，并且浏览器正确地渲染了它们的颜色，就像我分配它们一样，但是，由于文本被包裹在锚标记中，蓝色下划线来自Twitter Bootstrap 样式表仍然出现在我所有的样式文本下方。

我的解决方案：打开 bootstrap.min.css（或任何你的 Bootstrap 样式表）并搜索术语“下划线”，每当您在锚标记选择器中找到“文本装饰：下划线”时，如下所示：

a:hover, a:focus {
  color: #2a6496;
  text-decoration: underline;
}

或这个：

      a, a:visited {
    text-decoration: underline;
  }

您应该继续删除颜色和文本装饰规则。

这解决了我的问题。

于 2014-06-30T22:10:12.947 回答
0

这行不通

a div.wall-entry {text-decoration: none;} // Inside 'a' div with class wall-entry

但这会起作用。

div.wall-entry a{text-decoration: none;} // Inside div with class wall-entry 'a'

因为a标签有text-decoration.

于 2012-04-30T22:07:27.710 回答
0

如果您的链接在 div 标签内，那么您可以通过以下方式选择您的链接：

div > a:hover {
  text-decoration:none;
}

它工作正常，即使使用了 boostrap。

于 2016-10-27T22:47:07.660 回答