Edited after resolution for clarity.
I'd like to change the hover color over a button from the default blue to another color. I would like to do this without having to completely redefine all the CSS for the button. I only want to override the hover color, leaving the remaining defaults in place.
Pics:
Normally, it's this: Hovering, it's this:
I want to change the highlight color on hover.
EDIT:
Have tried:
.Cancel:hover
{
background: linear-gradient(black, white); //Tried these separately
background-color:Red;
}
and the button markup:
<asp:Button ID="btnPprGrdsCancelRefresh" runat="server" Text="Cancel/Refresh" CssClass="Cancel" />
The linear gradient appears to not be doing anything, and the background color changes the color of the button, not the mask over the button.
The :hover pseudo-class does that:
button:hover {
background-color: #f00;
}
However, styling form controls is usually tricky. If you're trying to let the browser render the buttons with its default styles, then just change the background-color on hover, it's not going to work; other properties (like borders) will also change, as this live example demonstrates. You have to choose between letting the browser and operating system decide how the control will look, on all states, or create your own styles for every state.
button:hover{
//style color here
}
Related
I would like to change the default outline glow of bootstrap for any dom element. I already did it for inputs and buttons but on any other element it is still blue. So for example, I press TAB on my keyboard and it goes to next element and it glows in blue. How do I change that? I can't find it in the css. Please look at the menu items below:
When I hit TAB on my keyboard it moves to the next each time and makes it glow in blue. How do I change that color? I think there is an easier way to modify the bootstrap css, either override it or host it locally and modify it rather than having to go after each class and specify the active, focus or whatever is causing this to glow in blue. Any ideas??
The outline glow you mentioned is called outline in CSS.
You will have to change the :focus pseudo property in css to get the color you want when you press the TAB key.
*:focus{
outline: red; /* Your color */
}
*:focus is what you are looking for:
*:focus {
box-shadow: 0 0 0 .2rem red !important;
}
you could override it using !important; like i did.
I am being unable to bring the changes made in inspect element to the main theme in WordPress. I want to make the overlay color transparent and have changed the code to
/* THE OVERLAY COLORS WHICH WILL SHOW IN FRONT OF BACKGROUND IMAGES*/
.overlay-layer-wrap {
background: transparent
}
.overlay-layer-2 {
background: transparent;
}
but it's not taking. help!
Your css uses cache, to refresh it, ether add version to it, or use shift + f5 to refresh the chashe as well.
To include version of style, you gotto style.css?v=01 this will refresh width version.
If that doesnt work, that means you are giving css to wrong element, or assigning element to wrong css. Eather way, you can hardcode it in your div using style='yourstyle' this will take priority than css, so if you have style html tag with bg color and css with bg color, it will take priority.
Twitter Bootstrap has background-color properties set for navigation items on their :focus state, but I want to undo that declaration for a specific navigation element.
For example, in some custom theme, let's say when the navigation item is in its default state, its background color is dark red. And then when you hover over it, it changes to light red.
Then, because of Bootstrap's declaration for the :focus state, if you click a navigation item, and move your mouse away from it, it will become light grey (from the default Bootsrap theme). This is what I want to get rid of.
What I want to achieve here is that, when you click an item, it should keep its default behavior, meaning dark red without the mouse over, and light red when the mouse is over it. But this doesn't work, because the :focus state seems to override the :hover state, so whatever I try to declare for :focus, works for both mouse over and mouse away.
I've also tried with background-color:transparent, and background-color:inherit. But the problem is always the same, which is that, whatever the color renders to, it keep being that regardless of the mouse being over the link or not. I want the background color to keep changing on hover, even when that link gets focus.
in your special element put an extra class and set the css.
.ExtraClass:focus{
color: #FFF !important;
}
.ExtraClass:hover{
color: #000 !important;
}
.ExtraClass{
color:#555 !important;
}
I've been trying to work out how to change (or add) a border color for the default Bootstrap popover arrow? I'm using the bottom arrow if it matters.
I have read some other questions and some suggested something like this:
.popover.bottom > .arrow:after {
border-bottom-color: yourColorHere;
}
However this fills in the color of the whole visible part of the arrow, what I want is just colors on the borders of the arrow.
Can this be done?
Btw....... If possible, I would like a solution without having to recompile the css.
just remove the :after selector to get the behavior you need
.popover.bottom > .arrow {
border-bottom-color: yourColorHere;
}
I have an issue using the slicknav responsive menu, if the navigation buttons have a different background colour set for the hover in the stylesheet, if you hover over the actual tag text the background colour changes correctly, but if you hover over any part of the button away from the text, then the colour behind the actual text doesn't change. So you get a rather ugly box around the text in the original colour. This is happening in all browsers tested.
I cannot find any way to stop this happening, the css file is not that complicated. I've used Slicknav now on a few sites and always had the same problem, but this time I really need to fix it.
You can see an example of this here: http://www.yorkluxuryholidays.co.uk/
In responsive mode, hover anywhere over one of the menu items that have sub menus, but not directly over the menu text itself, and the area behind the text does not change colour.
This is the css I'm using for the hover:
.slicknav_nav .slicknav_item:hover {
background:#59584e;
color:#fff; }
.slicknav_nav a:hover{
background:#59584e;
color:#fff;}
It seems to make no difference which class you set the colour on, either or both, the behaviour is exactly the same.
I'd love to know if there is a way to fix this with the css!
Add in your css :
.slicknav_nav a:hover * {
color:#fff;
background-color:#7b9fc7;
}