CSS / Bootstrap 3: remove styling from links
To make it complete (does not change colour on hover or after clicking it and inherits text-decoration, too):
.deco-none {
color: inherit;
text-decoration: inherit;
}
.deco-none:link {
color: inherit;
text-decoration: inherit;
}
.deco-none:hover {
color: inherit;
text-decoration: inherit;
}
Example Snippet
.deco-none {
color: inherit;
text-decoration: inherit;
}
.deco-none:link {
color: inherit;
text-decoration: inherit;
}
.deco-none:hover {
color: inherit;
text-decoration: inherit;
}
.bg-menu:hover {
background-color: #0079C1;
color: #FFFFFF;
}
.clickable {
cursor: pointer;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="row" style="width:400px;">
<ul class="list-unstyled col-md-4">
<li class="bg-menu clickable"><a href="#" class="deco-none">test1-1</a>
</li>
<li class="bg-menu clickable"><a href="#" class="deco-none">test1-2</a>
</li>
<li class="bg-menu clickable"><a href="#" class="deco-none">test1-3</a>
</li>
</ul>
<ul class="list-unstyled col-md-4">
<li class="bg-menu clickable"><a href="#" class="deco-none">test2-1</a>
</li>
<li class="bg-menu clickable"><a href="#" class="deco-none">test2-2</a>
</li>
<li class="bg-menu clickable"><a href="#" class="deco-none">test2-3</a>
</li>
</ul>
<ul class="list-unstyled col-md-4">
<li class="bg-menu clickable"><a href="#" class="deco-none">test3-1</a>
</li>
<li class="bg-menu clickable"><a href="#" class="deco-none">test3-2</a>
</li>
<li class="bg-menu clickable"><a href="#" class="deco-none">test3-3</a>
</li>
</ul>
</div>You got it wrong in CSS. Try this
FIDDLE
a.deco-none {
color:#000000 !important;
text-decoration:none;
}
.bg-menu:hover {
background-color:#0079C1;
color:#FFFFFF;
}
.clickable {
cursor:pointer;
}
Below code is wrong
a.deco-none: {
color:#000000 !important;
text-decoration:none;
}
I would suggest to use the inherit keyword to inherit the parents color. I know you wanted them black, but I'm sure that other users will find it helpful.
a.deco-none {
color: inherit;
text-decoration:none;
}
as Dimitry K said, you had the a.deco-none: typo.