[英]'Text-decoration: none' not working in Bootstrap
On hover, my text links have underlines. 在悬停时,我的文字链接有下划线。 This is the default in Bootstrap. 这是Bootstrap中的默认值。
I want to keep this, unless the link is within a certain div. 我想保留这个,除非链接在某个div内。
The code I have tried (and several variations) doesn't work. 我尝试的代码(和几个变体)不起作用。
The HTML: 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>
My CSS: 我的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 quick note: I have tested a {text-decoration: none;}
, this does work. 快速说明:我测试a {text-decoration: none;}
,这确实有效。 However, I don't want to change everything. 但是,我不想改变一切。 Just the links in this specific case. 只是这个特定情况下的链接。
put the font-family in quotes for fonts that involve multiple words, first of all: 将font-family放在包含多个单词的字体的引号中,首先:
font-family: "Neuzit Heavy", sans-serif;
then beneath a
put .wall-entry a:hover { text-decoration: none; }
然后在a
put .wall-entry a:hover { text-decoration: none; }
.wall-entry a:hover { text-decoration: none; }
You have the order switched around. 您已切换订单。 The item you're targeting should be to the right. 您要定位的项目应该在右侧。 For example, 例如,
.wrapper .header a
in english means "Target all anchor links that are inside of .header, that are inside of .wrapper" .wrapper .header a
in english表示“定位.header内部的所有锚链接,位于.wrapper内”
The problem is actually a caused by Twitter Bootstrap's CSS file, not your code. 问题实际上是由Twitter Bootstrap的CSS文件引起的,而不是你的代码。
Twitter Bootstrap's CSS file (bootstrap.min.css was the culprit on my project) gives links underlines multiple times. Twitter Bootstrap的CSS文件(bootstrap.min.css是我项目的罪魁祸首)给链接多次下划线。 It gives them an underline when they're hovered over, when they're focused on, and it even makes them blue. 当它们被徘徊时,当它们聚焦时,它会给它们一个下划线,甚至使它们变成蓝色。
In my project, I specifically assigned my own colors to the text that was inside anchor tags, and the browser rendered their colors correctly, just as I assigned them, however, since the text was wrapped in an anchor tag, the blue underline from the Twitter Bootstrap stylesheet still appeared below all my styled text. 在我的项目中,我特意将自己的颜色分配给锚标签内的文本,并且浏览器正确地呈现了它们的颜色,就像我分配它们一样,但是,因为文本被包裹在锚标记中,蓝色下划线来自Twitter Bootstrap样式表仍然出现在我所有样式的文本下面。
My solution: open bootstrap.min.css (or whatever your Bootstrap stylesheet is called) and search for the term 'underline', and whenever you find 'text-decoration: underline' inside an anchor tag selector, like this: 我的解决方案:打开bootstrap.min.css(或调用任何Bootstrap样式表)并搜索术语“下划线”,每当你在锚标签选择器中找到'text-decoration:underline'时,如下所示:
a:hover, a:focus {
color: #2a6496;
text-decoration: underline;
}
or this: 或这个:
a, a:visited {
text-decoration: underline;
}
you should go ahead and remove the color and text-decoration rules. 你应该继续删除颜色和文本装饰规则。
That solved my problem. 这解决了我的问题。
This won't work 这不行
a div.wall-entry {text-decoration: none;} // Inside 'a' div with class wall-entry
but this will work. 但这会奏效。
div.wall-entry a{text-decoration: none;} // Inside div with class wall-entry 'a'
because an a
tag has text-decoration
. 因为a
标签有text-decoration
。
If your link is inside div tags, then you can select your link this way: 如果你的链接在div标签内,那么你可以这样选择你的链接:
div > a:hover {
text-decoration:none;
}
It works fine, even with boostrap used. 它工作正常,即使使用了boostrap。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.