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.
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 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;
}
Hello I'm having some issues with CSS on my blog. My Wordpress theme has a post styles section in the CSS file which have a class "Entry" in which "a" attribute is defined for the links inside the article area.
I generated a button from css generator and inserted the button in an article that is pointing to some other website using href. My CSS file has something like this,
.Entry a{color:black;text-decoration:underline};
.button {background:black;color:white And some other Styling};
I used this code to display the button.
Go to this link
Without the use of class="button", the link follow the Entry a property. But when I use class with it, it display the button with the mixture of Entry a and class button styles. I don't want the button to use Entry a properties. Any help?
You could rewrite the first rule using the CSS3 :not pseudo-class selector as
.Entry a:not(.button) {color:black;text-decoration:underline}
This will do what you need, but it's not supported by IE versions earlier than 9.
A true cross-browser solution is more involved: you would need to "undo" the attributes that .Entry a applies in your .button rule. For example:
.Entry a {color:black;text-decoration:underline}
.button {color:white;text-decoration:none;background:black}
Update: I forgot something quite important.
If you do go the "undo" route you will need to make sure that the "undoing" selector has specificity at least equal to that of the first selector. I recommend reading the linked page (it's not long) to get to grips with the concept; in this specific case to achieve this you have to write a.button instead of simply .button.
For avoid .Entry a CSS styles to be applied at when you use the selector .button you should overwritte with the selector .button all the properties defined in .Entry a
For example:
.Entry a{color:black;text-decoration:underline};
.button {color:white;text-decoration:none;background:black;color:white And some other Styling};
This happens because .Entry a has a higher specificity than .button. The result is that your element receives its actual background property from .button but its color and text-decoration properties come from .Entry a.
There are a few ways to "fix" this:
Increase the specificity of the .button selector.For example, if you only use .button on a tags, you could change the selector to a.button. This new selector would have the same specificity as .Entry a (one tag value and one class value), so the "winner" is decided by the source order. If a.button comes after .Entry a in the CSS file, a.button takes the upperhand.
Decrease the specificity of the .Entry a selector.Do you really need to target only a tags inside .Entry elements? Can you get away with simply making it a base style for all a tags? If you can, you can simply change .Entry a to a. This new selector has only one tag value, which is less specific than the one class value in .button.
Define extra selectors on .button.For example, you could use .button, a.button so that the second selector takes over where the first selector fails. Be warned that this could get very messy when you encounter this same problem with other tags such as input or button tags.
Use !important.Never do this, as you'll get yourself in trouble if you ever try to make a .big-button class which needs to override some .button styles.
If you want to learn more about specificity, here's a good article about what it is and how it's calculated.
Well in CSS3 you could do this:
.Entry a:not(.button)
That will restrict your .Entry a rule from affecting any elements with .button.
If CSS3 is not an option (i.e. you need to support IE <= 8) you'll need to overwrite whichever inadvertent styles are being inherited. So for example if your button is ending up with an unwanted border from .Entry a, overwrite this in your .button rule, e.g.
.button { border: none; /* more button styles */ }
You could overwrite any styles in .button class that are defined in .Entry a
E.g. if you dont want your text to be underlined you could use text-decoration: none
.Entry a{
color: black;
text-decoration: underline;
}
a.button {
background: black;
color: white;
text-decoration: none;
/*And some other Styling*/
}
Also don't use semicolons after braces }; in your css. simply use a brace to close }
The simplest thing would be to "undo" the specific styles that your element inherits from the styles for .Entry a. For example, to undo the text-decoration style, you could use text-decoration:none.
If you only need it to work for newer browsers, then you could use the not() selector #Jon has mentioned.
Hopefully this isn't a stupid question but I can't seem to work out how to do this. Can you apply a wildcard to an anchor hover/focus so that the style is applied to all classes?
Something like
a:hover * { color: #ff0000; }
Say I have
a { color: #DD0000; }
a.link { color: #ffffff; }
a.link2 { color: #000000; }
a.user { ...
a.anything { ...
The easiest way to explain what I'm looking for is to have a global :hover style, but multiple :link styles.
Thanks
There are a number of ways you can do this. As mentioned by others, you can apply the same style to multiple classes like so:
div a.class1:hover, div a.class2:hover, div a.class3:hover { ... }
You can also create a custom class just for the style you want to apply:
div a.customClass:hover { ... }
You could use * like you mentioned in the question, but apply hover to it:
div *:hover { ... }
There's also this option, where you just apply the style for all a's, although you probably know about this option already:
a:hover { ... }
Edit: If your style is being "overwritten" by something else, a quick and easy way to check would be to use your browser's developer tools to inspect the element. You can even apply pseudo-classes (ie. apply :hover pseudo-class even when you're not hovering over the element) with the developer tools included with Chrome and Firefox (you may need to download Firebug to do this with Firefox).
Another option would be to use !important to increase the selector's specificity. For example:
a:hover { background: red !important; }
You can read more about how the specificity is calculated here.
If you want to apply a global css rule for a specific tag, write (for anchors):
a:link{/*your styles go here*/}
a:hover{/*your styles go here*/}
a:active{/*your styles go here*/}
a:visited{/*your styles go here*/}
If you would like a special link styled in a different way (maybe making it a button), just apply a class to it and style the class:
a.customlink{/*your styles go here*/}
EDIT: if you want only some properties of the link to change on hover, which are going to be the same for two different links (let's say one ha yellow, while the other red colored background, and you wanted them both to have a black background), add another same class to the two links, and stylize it.
JsFiddle Example
You could separate them by commas like a:hover link, a:hover link2, a:hover etc { color: #ff0000; }
Does a:hover { color: #ff0000; } not do what you want it to?
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.