I need to disable the mouse hover on a particular button(not on all buttons) in the entire DOM. Please let me know how to achieve it using a CSS class.
i am using the below CSS class when my button is disabled. now i want to remove the hover effect using the same class.
.buttonDisabled
{
Cursor:text !important; Text-Decoration: None !important;
}
The above class will take care of removing the hand sign and text underline on mouse over . Now i want to remove hover effect also. Please let me know.
I have really simple solution for this.
just create a new class
.noHover{
pointer-events: none;
}
and use this to disable any event on it. use it like:
<a href='' class='btn noHover'>You cant touch ME :P</a>
You can achieve this using :not selector:
HTML code:
<a class="button">Click me</a>
<a class="button disable">Click me</a>
CSS code (using scss):
.button {
background-color: red;
&:not(.disable):hover {
/* apply hover effect here */
}
}
In this way you apply the hover effect style when a specified class (.disable) is not applied.
Here is way to to unset the hover effect.
.table-hover > tbody > tr.hidden-table:hover > td {
background-color: unset !important;
color: unset !important;
}
For this I ended up using an inline style because I only wanted the one particular element not to have any hover on-click event or style due to it just being part of instructions regarding the other buttons that looked like it on the page, and to give it override precedence. Which was this:
<button style="pointer-events:none"></button>
This removed all styling and bound JavaScript/JQuery functionality on the single element for me, while not affecting the others on the page :). For more info see the mozilla reference.
To disable the hover effect, I've got two suggestions:
if your hover effect is triggered by JavaScript, just use $.unbind('hover');
if your hover style is triggered by class, then just use $.removeClass('hoverCssClass');
Using CSS !important to override CSS will make your CSS very unclean thus that method is not recommended. You can always duplicate a CSS style with different class name to keep the same styling.
From your question all I can understand is that you already have some hover effect on your button which you want remove.
For that either remove that css which causes the hover effect or override it.
For overriding, do this
.buttonDisabled:hover
{
//overriding css goes here
}
For example if your button's background color changes on hover from red to blue. In the overriding css you will make it as red so that it doesnt change.
Also go through all the rules of writing and overriding css. Get familiar with what css will have what priority.
Best of luck.
Do this Html and the CSS is in the head tag. Just make a new class and in the css use this code snippet:
pointer-events:none;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.buttonDisabled {
pointer-events: none;
}
</style>
</head>
<body>
<button class="buttonDisabled">Not-a-button</button>
</body>
</html>
Add the following to add hover effect on disabled button:
.buttonDisabled:hover
{
/*your code goes here*/
}
Use transition: all 100s ease-in-out; to override the hover change. This is not a solution but a workaround if you do not know the original value of the property which you want to replace.
Other solutions didn't work for me.
I simply changed this
.home_page_category_links {
color:#eb4746;
}
to this:
.home_page_category_links, .home_page_category_links:hover {
color:#eb4746;
}
That means the same styles that are applied to elements of that class are also applied to elements of that class when hovered.
Extra note: If you're keeping the colour the same, perhaps you may also want to avoid any underline, if so, just include text-decoration: none; as well (or text-decoration: none !important; if using bootstrap).
I tried the following and it works for me better
Code:
.unstyled-link{
color: inherit;
text-decoration: inherit;
&:link,
&:hover {
color: inherit;
text-decoration: inherit;
}
}
What I did here is that I make the hover effect on the button but doesn't apply to the button that has the disabled class
button:hover:not(button.disabled){
background-color: rgb(214, 214, 214);
color: rgb(0, 0, 44);
}
Problem which I understood - Well I was doing something the same as yours. I have used four links among which two of them will hover and the other two will not. Now that I have used the a tag(hyperlink tag in HTML) to use hover, all my hyperlinks start hovering, which I don't want.
So, I put the two a tags which were not supposed to hover inside the same class, say .drop, and use the class to specify that I want all a tags inside the dropped class not to hover but the other a tags do.
To do so, I just wrote a CSS
a:not(.drop):hover {background-color: limegreen}
what I meant here is that apply a hover to all the tags but not the ones which are inside the .drop class.
Hope that helps!
#Simone Colnaghi was the first to mention it, and it worked for me too.
I have also faced the similar problem but the below method works for me.
Lets suppose you have two class, wantsHover and dontWantsHover just use:
.wantsHover:not(.dontWantsHover):hover {
background-color: red;
}
Related
I am using a bootstrap 3.3.7 button, and want the button to stay the same color when a mouse focuses, hovers, or clicks on it.
<button class="btn btn-default delete-btn">Delete</button>
Here is where I modify the background-color for my CSS selectors:
.delete-btn:hover, .delete-btn:focus, .delete-btn:active {
background-color: white;
}
This works just fine for a focus or hover event.
However, when the mouse clicks on the button, it changes to it's default grey color. Any ideas what I am missing here? Scratching my head...
The Bootstrap stylesheet has this set of selectors:
.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover
.btn-default:active:focus and .btn-default:active:hover are more specific than selectors with only one pseudo-class.
You need to make your selector equally specific:
.delete-btn:hover, .delete-btn:focus,
.delete-btn:active:hover, .delete-btn:active:focus, {
background-color: white;
}
Try the selector .btn.btn-default.delete-btn instread of only .delete-btn and use important.
.btn.btn-default.delete-btn:hover, .btn.btn-default.delete-btn:focus, .btn.btn-default.delete-btn:active {
background-color: white !important;
}
Else, Inspect element on your browser to find the grey color and replace the whole css rule with white color.
Else, check if there is something wrong going on in your javascript and replace your color rule with click event.
Try add important at the end of code like this:background-color: white!important; .
use !important in your styles to replace default styles of bootstrap
Add !important after your css attributes which replace bootstrap default css with yours and give priority to your css For avoiding box shadow use box-shadow. Add This Css:---
.delete-btn:hover, .delete-btn:focus, .delete-btn:active {
background-color: white !important;
box-shadow: none !important;
}
I have a button with a rollover using jquery ui to add the class "ui-state-hover" so that the background color/color change on rollover.
Here is the css for the rollover:
.ui-state-hover { border: none; background: #d0e5f5 url(images/ui-bg_glass_75_d0e5f5_1x400.png) 50% 50% repeat-x; font-weight: bold; color:#fff !important; }
I am trying to add seperate css for a rollover on another button which has the class "ui-priority-cart" by adding this css:
.ui-priority-cart .ui-state-hover{color:#00dfff !important;}
however it does not seem to be affecting the color as it still remains white on rollover. Am I missing something?
Your CSS rule should be:
.ui-priority-cart.ui-state-hover { /* your rules here */ }
Note the lack of a space, this will apply to an element with both classes ui-priority-cart and ui-state-hover, which I believe is what you're looking for.
The difference is, the CSS you posted would apply to elements with a class of ui-state-hover inside an element with a class of ui-priority-cart.
That applies to any element with the class .ui-state-hover that is a child of an element with a .ui-priority-cart class.
you may be looking for .ui-priority-cart.ui-state-hover which means any element that have both classes.
Is it possible, without using Javascript, to have an anchor i.e.
<a href="#otherlook">
to use extra CSS when selected. For example making the text larger, changing colours?
EDIT
Please take a look at fiddle. What CSS will achieve the second p tag to change upon the anchor being selected?
This will do what you want according to your sample link. It uses the :target pseudo-element. The href must match the id of the element you want to style. Put the styles you want to apply to your paragraph into the p:target class.
Demo: http://jsfiddle.net/ThinkingStiff/9JVpZ/
HTML:
Other Look
<p id="keepnormal">Keep this normal</p>
<p id="other">This to change on select Other Look</p>
CSS:
p:target {
color: red;
}
Output (before click):
Output (after click):
If you don't include IE6, then yes it can be done in a cross-browser safe way:
a[href="#otherlook"] { styles go here }
I stand corrected, it can be done using CSS. See ThinkingStiff's code.
No, you can't do it without JavaScript, but it doesn't require much work.
<a href="#otherlook"
onClick="document.body.className += ' newColorScheme'">Change colors</a>
i use thislink,
HTML :
Stays colored
CSS:
a {
color: black;
}
a:focus {
color:yellow;
background-color: red;
}
No, Ed, there is not.
But using jquery it should be pretty straight-forward:
<head>
...
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
...
</head>
<body>
...
<a href="#otherlook" onclick="$('body').addClass('otherlook'); return false;">
...
</body>
This seems painfully simple, but I can't work out how to do it:
I want every link on my site to have a specific style on mouseover, so I use
a:hover {
/*style goes here*/
}
The thing is, I don't want that style applied to links that are images, but
a:hover img {
/*reset style*/
}
doesn't work. What should I try instead?
Your attempt is restyling the image element, not the a element, which is why it doesn't work (see here for an explanation of CSS selector syntax). Unfortunately, there is no syntax for selecting the parent of an element, so as others have said, you will have to create a special class for image links.
For links that are images, use a different css class instead of referencing all anchor tags.
The only way to do it is to put a class on the as that enclose imgs, like so:
<img src="image.jpg" alt="Image" />
And then select it in CSS with
a.imagelink:hover {
/* styles */
}
Try this:
a:hover {
/*link style goes here*/
}
Select all images with links when hovered and set another style.
a:link:hover img {
/* hovered, linked image styles */
}
This will select only images that have links and are hovered over.
Works in Weebly as well.
Anyhow, I have a problem. A tiny problem I suppose, but one that's bugging me. I updated the CSS for my anchors on my blog, so that they were underlined with a border. Problem now is all my images that were linked are underlined, and it looks wrong.
So I assume the only way to fix this is to apply a CSS class to all the images inside anchors so that they have border: none;. I don't know how to do this though. Anyone willing to explain if this is even possible? Thanks in advance.
Try this:
<style type="text/css">
a img { text-decoration: none } // Images within
</style>
However, this is awfully general and if your anchors have padding, it won't work entirely, there may be residue underlining to the right and left of your image.
It would be better to turn underlining for links off in general, define a CSS class for your anchors, and turn underlining on in that class:
a { text-decoration: none }
a.my_anchor_class { text-decoration: underline }
Try this:
a img { border:none; vertical-align:top; }
It moves the underline to the top and underneath the image.
Underlining is controlled by the text-decoration CSS property. So if you want to turn that off:
a { text-decoration: none; }
In jQuery, you could use the has selector to add a class to all links that have an image inside them:
$('a:has(img)').addClass('image-link');
Then remove the border from those links in your CSS:
a.image-link {
border-bottom-style: none;
}
It would only work when JavaScript’s enabled though.