I've included Bootstrap-3 glyphicons on my website:
<a class="glyphicon glyphicon-wrench"></a>
I have voluntarily omitted the href attribute because I don't need the clickable property (these icons are just used for decoration).
The icons remain clickable: the color changes when the mouse comes over them and a underline appears at the same time, giving the illusion that they can be clicked to achieve something...
Is there a way to disable this behavior?
Don't use a, instead use something like span or i. Style the span the way you like.
HTML:
<span class="glyphicon glyphicon-wrench"></span>
HTML icon in a:
<span class="glyphicon glyphicon-wrench"></span> Link with icon
CSS:
a span { your style }
Add this CSS
.glyphicon {
color: #000 !important;
}
.glyphicon:hover {
text-decoration: none;
color: /* Set your colour if you do not want to use "!important" */;
cursor: default;
}
You can either set your colour using !important which increases the specificity to 100 or just give :hover the same colour. I would recommend the later to keep low specificity.
.avoid-clicks {
pointer-events: none;
}
<a class="avoid-clicks">try selecting text through me</a>
use pointer-events:none see this example
Related
My anchor even after applying CSS styles to it when it's disabled still acts like hyperlink. Changes colour when hovered on.
I've spent some time on this already and almost giving up on this one. I want the magnifying glass to not change colour at all after hovering over it.
This is the anchor
<a href="" class="postcode-search-icon clickable"
ng-click="searchPostcode()" ng-disabled="true" title="Search Postcode">
</a href="">
And my current CSS styles attempt to fix it
.postcode-search-icon[disabled], .postcode-search-icon[disabled]:hover {
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
}
What am I doing wrong?
In case you're wondering clickable class is just this so it doesn't matter
.clickable {
cursor: pointer;
}
#edit
Looks like applying color: (original colour) makes a temporary workaround until I find something better.
It seems like your css selector is wrong. The disabled pseudo class only works with input fields and not with anchors.
input[disabled="disabled"], input.disabled {
/* whatever you want */
}
Besides that, idk how you handle the addition of the clickable class, you need to handle that in order to not override styles.
If you are using Angular, you should be able to use a conditional class with the ngClass attribute. Not sure if you are using Angular 2, 3, 4, 5, or JS (here's the JS link for ng-class).
I think I would make the clickable item into a button, as well.
.bright:hover {
color: #0066ff;
cursor: pointer;
}
.dim:hover {
color: #ccc;
cursor: default;
}
<button ng-class="{bright: enabled, dim: disabled}"><i class="search-icon"></i> Search</button>
I have made animated on hover divs but as soon as I attached hyperlinks to them purple outlines appeared. Codepen: https://codepen.io/forTheLoveOfCode/pen/yPEygM
The way I am attaching hyperlinks to divs at the moment is as follows:
<a href="https://www.freecodecamp.org/misskatiapunter">
<div class="communities-link" id="free-code-camp-butn">
<i class="fa fa-free-code-camp ffc-text"></i>
</div>
</a>
What would be the best way to overwrite all hyperlink styles so that the only effect hyperlink has on a div is - to link it to another page.
What you're looking for is to set the color property on the a tag, and you'll probably also want to set the text-decoration property to none:
a {
color: inherit;
text-decoration: none;
}
color: inherit states that the element should inherit the colour from the parent element, if defined. If a parental colour is not defined, it will inherit a black colour from <body>.
color: inherit is the most commonly-desired usage, allowing you to change the colour, but if you need to override this for specific links you can use color: initial, which will set it back to its default value of blue:
a {
color: inherit; /* Becomes black */
}
a.blue {
color: initial; /* Becomes blue, overriding the inheritance from a */
}
text-decoration: none removes the underline from 'regular' hyperlinks. It won't have any effect in your specific use-case, but is useful if you want to remove the underline entirely.
I've created an updated pen showcasing this here.
Hope this helps! :)
If you ever want to remove default styles, do it the same way that you would if you were to add the style. for instance: if the link has a purple outline, add a a {border: 0;} property, or if it appears whenever you hover it, do a:hover{border: 0;}, or if it shows when its clicked do a:active{border: 0;}
I have a bootstrap nav:
The highlighted bit is currently a list element of the nav and as such, the color changes on hover over and it is meant to be used as a navigation action. I would like to instead use it as a static label, meant to show the user something about where they are in the application. I know that I can added the class 'disabled' to make it look 'less' clickable, but it still changes slightly on hover over, and displays a cursor other than the default.
I'm hoping to have it display as a simple centered label that doesn't appear to be clickable in any way.
Using pointer-events: none; on the label will disable the element from registering any mouse events, including hover effects and bypassing the issue you had with it.
After writing this question I decided to just override Bootstrap's styles for the particular element in question so that they appear statically.
html:
<ul class="nav nav-tabs">
<li><a><span class="glyphicon glyphicon-menu-left"></span></a></li>
<li class="label-li disabled"></li>
<li href="#"><span class="glyphicon glyphicon-trash"></span> </a></li>
</ul>
css:
.label-li {
width: 80%;
font-weight: bold;
}
.label-li a {
width: 100%;
text-align: center;
cursor: default !important;
border: none !important;
}
the two lines ended by !important are what prevent's bootstrap's style from taking over.
While your solution does work, I would recommend instead looking at the :hover selector (http://www.w3schools.com/cssref/sel_hover.asp). This is what bootstrap does internally to create the various effects, and with it you can override all of the properties it assigns, such as the color and cursor change. Just assign them to the same values as normal using :hover and nothing will change, no need to use the !important.
I have the following markup:
<a href="#" title="Feedback" id="feedbacktogglenav">
Feedback
<i class="icon-comment"></i>
</a>
On hover, I would like the text to be underlined but not the font-awesome icon. I know you can do "text-decoration:none" on the icon (which works) but when you hover on the text part it still adds the underline to the icon. Any ideas?
http://jsfiddle.net/ZZEQd/
I've discovered a way of doing this without needing an extra span tag, it works in every browser I've tried it in (FF/Chrome/Safari/Opera)... except IE8 (I haven't tested in IE 9 or 10 either).
Just declare the icon as display:inline-block, no more underline on hover.
Example: http://jsfiddle.net/J432G/
HTML:
<a href="#" title="Feedback" id="feedbacktogglenav">
Feedback<i class="icon-comment"></i>
</a>
CSS:
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
i:after{
content: '{icon}';
display: inline-block;
padding-left: 1em;
}
...but when you hover on the text part it still adds the underline to the icon. Any ideas?
To get this to work you'd need to contain the link text within a separate element (a span, ideally):
<a href="#">
<span>Feedback</span>
<i class="icon-comment"></i>
</a>
Now you can remove the text-decoration from the link completely and assign it only to the span (on hover):
a {
text-decoration:none;
}
a:hover span {
text-decoration:underline;
}
JSFiddle demo.
The only way to do this reliably is to assign text-decoration:none to the first parent element i.e the initial a tag.
If you cannot add a span element (let's assume you just have acccess to CSS), it should work withfloat:left or right on your icon element.
See: CSS linked images are being underlined ("a" display is set to block)
Someone just responded but deleted their response. The solution was:
#utilitynav a i {text-decoration:none;}
Thank you mystery person!
http://jsfiddle.net/ZZEQd/2/
Just add a span tag in your HTML and you should fine.
HTML:
<a href="#" title="Feedback" id="feedbacktogglenav">
<span class="linkHover">Feedback</span>
<i class="icon-comment"></i>
</a>
CSS
a {
text-decoration:none;
}
.linkHover:hover{
text-decoration: underline;
}
#utilitynav .icon-comment {
font-size: 12px;
margin-left: 3px;
position: absolute;
top: 2px;
}
#utilitynav .icon-comment:hover {
text-decoration:none;
}
#utilitynav #feedbacktogglenav {
margin-right: 12px;
}
I added a class to your span for it wouldn't effect future span tags
If you have a situation where you can't use :before or :after (because the specific icon is set by the content, not by the global style, for example) and you also don't want to have to go in and put <span> around the link text everywhere... one other option is to put padding on the link, and absolutely position the icon over the padding.
HTML
Feedback <i class="icon-comment fas fa-link"></i>
CSS
a {
position: relative;
text-decoration:none;
padding-left: 20px;
}
a:hover {
text-decoration:underline;
}
a i {
position: absolute;
left: 0;
}
JSFiddle: http://jsfiddle.net/w6bL5m8k/1/
I'm sure there are probably all kinds of special conditions under which this isn't going to work out... but for simple situations it should be fine.
I want to set color of some elements to default link color with CSS.
That color is the same as <span style="color: link;">that</span>.
Any way to do that? This website don't change default browser's link color.
Even if you don't change the default color, it would still be a good idea to specify the color to ensure that it looks the same in all browsers. I'd put something like this in the stylesheet:
a, span.link {
color: blue;
}
a:visited, span.visited {
color: purple;
}
a:active, span.active {
color: red;
}
Then you can style spans as links by <span class="link">Your fake link</span>
after some time messing around with testing pure css and css/javascript i'm sure you can't set the color of any other element to the default link-color of the browser - but like Machine said, you can try using classes to do this (but you won't be able to use the browser defaults, you have to set your own colors)
If you want to set to a new color for a link or to prevent the change of the color of a specific link after visiting it, add inside the <a> tag:
<A STYLE="text-decoration:none; color=[select your favorite...]" HREF="link.html">test link</A>