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.
Related
Right now if i add inactiveLink class to <a> it also affects buttons inside. They cant be clicked anymore. Do i have to make another style activeLink that turns those features back on or is there a way to only affect <a> element without affecting buttons inside?
If there is no other way, what are default cursor and pointer-events for Buttons?
HTML
<a class="text-body selectable-element inactiveLink">
[...]
<button>Click</button>
</a>
CSS
a.inactiveLink {
pointer-events: none;
cursor: default;
}
While the other answer will work (it was deleted as I was typing this), the real question is: If you want the anchor deactivated, should an active button really go inside it?
As the site/app scales, will other developers know what that class does? I think the CSS is fine the way it is, but the HTML could be moved around so those active elements exist outside the inactive anchor (perhaps in a shared parent element). Food for thought!
If you just want the quick fix, add the class "always-active" to the button, and add the following CSS:
.always-active {
cursor: auto;
pointer-events: auto;
}
a.inactiveLink {
pointer-events: none;
cursor: default;
}
button.always-active {
pointer-events: auto;
cursor: auto;
}
<a class="text-body selectable-element inactiveLink">
[...]
<button class="always-active" onClick="alert('it works')">Click</button>
</a>
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'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
So I, like all of you have a menubar (header) on top of my website
and recently found out how to use icons.
Now What I need is a menu wich at first shows ONLY the Icons and when you hover over the text (e.g. HOME, SHOP, etc.) shows up to the right of the icon.
Any way to to this with css?
Thx!
Yes, you can do this with CSS.
Here's an example:
Create a <span> class: <span class="hideBeforeShow"></span>.
<ul>
<li><span class="hideBeforeShow">Test</span></li>
</ul>
Next, make sure you make the class hidden using visibility: hidden;:
li .hideBeforeShow
{
visibility: hidden;
padding-left: 7px;
padding-right: 7px;
}
(padding is added to separate it from the icon)
Next, you'll want to make it show when you hover over the <li></li> element. After you hover over it, you can select it by adding the class name afterwards:
li:hover .hideBeforeShow
{
visibility: visible;
}
Next, you'll want to hide the icon. Set the content to nothing, or hide the image, whatever you want to do.
li:hover:after
{
font-family: none;
content '';
}
You can substitute these 'font-awesome' icons with images instead. The same concept applies.
Here's the jsFiddle example. Play with it.
I'm trying to place a link in Wordpress quickly and we have a pretty complex style being applied to all a href links in the section. Here's a small sample of the selector and the styles within (there's about 40 lines of styles which I held back)
div.content-rotator li.featured-content a {
margin: 0px;
border: 1px solid rgb(34,56,19);
}
Is there anyway I can place a link in this li and override the parent style? It has to appear within the li with class featured-content.
I don't want to touch the existing CSS at this stage so I'd prefer to implement inline styles on the a element.
Thanks
EDIT: Just in case it wasn't clear, the CSS above is coming from the style sheet and I'd like to zero it out.
There's > 50 lines of styles in this though, I've only shown two for brevity so inline replacing them all isn't really an option.
Just use inline styles or/and add !important to overriden CSS definition, like:
<div class="content-rotator">
<ul>
<li class="featured-content">
...
</li>
</ul>
</div>
or
div.content-rotator li.featured-content a.other {
margin: 3px !important;
border: none !important;
}
Give the selected link an ID and just add !important to the styles. I don't think there is a better alternative unless you plan to go through the entire stylesheet.