Overwrite CSS rule background color with opacity - css

I have the following rules
.homeSearch li {
background-color: rgba(144,178,59, 0.8);
background: rgba(144,178,59, 0.8);
color: rgba(144,178,59, 0.8);
}
But when i try to override the background color on the hover of the li, because the background color that i give is again in rgba, the override keeps also the previous colors.
.homeSearch li a:hover, .homeSearch li a.active{
background-color: rgba(40,65,113, 0.8) !important;
background: rgba(40,65,113, 0.8) !important;
}


CSS should be (no need !important):
.homeSearch li:hover,
.homeSearch li.active{
background-color: rgba(40,65,113, 0.8);
background: rgba(40,65,113, 0.8);
}

Related

Pagination Styling (CSS)

I am trying to change the colour of my active pagination button from black to the light brown (#a88f4b), but it seems as though I can't get rid of the black. What is it I'm getting wrong here?
http://demo.boxofficeboxing.co.uk/?s=
.eltd-pagination a {
color: #666 !important;
}
.eltd-pagination li.active {
background-color: #a88f4b !important;
}
.eltd-pagination a:hover {
color: #fff !important;
background-color: #a88f4b !important;

This is your line that should modify:
.eltd-pagination ul li a:hover,
.eltd-pagination ul li.active span {
background-color: #a88f4b !important;
color: #fff !important;
}
In you pagination, active li has span in it instead a tag so you had to set style on the span not li like code above. copy/paste code above in your css in very last line.

Foundation tabs hover background color

I am using foundation and need to change default background color, font color and color on hover. I have tried something like this but it is not working for me:
My css file:
.tabs {
background-color: #353A41;
border: 0;
}
.tabs a{
color: #FFFFFF;
}
.tabs :hover{
background-color: #2A2E34;
}

This is not valid:
.tabs :hover {
background-color: #2A2E34;
}
Try this instead:
.tabs a:hover {
background-color: #2A2E34;
}

Try adding this to your custom CSS:
.tabs a{
background: colorname;
color: colorname;
}
.tabs-title > a:focus, .tabs-title > a[aria-selected='true'] {
background: colorname;
color: colorname;
}

Transparent bootstrap dropdown menu

I'm trying to make a Bootstrap menu like this one https://makr.com/
I´m doing ok, but I haven't figured out how I can make it completely transparent one hover.
As you can see in the fiddle below there is always some shade of grey in the dropdown when I hover.
I really don´t know what more I can do... I've been googling and searching for a solution all yesterday and this morning and I'm really stuck now.
can anyone take a look at the fiddle and advise me, it would be very much appreciated
The only colour that should be in the menu is the
.navbar-default {
background-color: transparent; border-color: transparent;
}
.navbar-default :hover {
background-color: rgba(248, 248, 248, .7); border-color: rgba(231, 231, 231, .7)
{
on hover
https://jsfiddle.net/dadihall/5zzcq2t5/22/
thanks in advance
Dadi

Try this:
.navbar:hover {
background: rgba(248, 248, 248, 0.7) none repeat scroll 0 0 !important;
}
.navbar-default *:hover{
background:transparent !important;
}
see fiddle.

Hi there please try the following css
.dropdown.full-width {
width : 120px;
background-image: transparent;
background-color: transparent;
}
.full-width.dropdown > .dropdown-menu > li > a {
white-space: normal;
background-image: transparent;
background-color: rgba(255,255,255,0.5); //or any level of transparency
}
.full-width.dropdown > .dropdown-menu > li > a:hover {
background-color: rgba(255,255,255,0.5); //or any level of transparency
}

Change color of menu item on mouse hover

I am trying to change the color of the menu item to black on mouse hover but after several tries, I am unable to do so. Please guide me. Thanks.
.primary-nav .suppa_menu .suppa_top_level_link.current-menu-item, .primary-nav .suppa_menu .suppa_top_level_link.current-menu-ancestor{
background-color: #FFFFFF !important;
}
.primary-nav .suppa_menu:hover .suppa_top_level_link {
background-color:#FFFFFF !important;
color: #000000 !important;
}
.suppa_item_title:hover .suppa_menu a:hover .suppa_item_title:hover{
color: #000000 !important;
}

In primary-nav.css, the color of the text on hover is currently set as:
.primary-nav .suppa_menu:hover .suppa_top_level_link .suppa_item_title {
color: #ffffff;
}
If you change this to:
.primary-nav .suppa_menu:hover .suppa_top_level_link .suppa_item_title {
color: #000000 !important;
}
it should work.

css styles for tabbed menu, background color

I wanted to add a tabbed look to the website i am building. Already did that, but now i want to change the tab color depending on which tab i am, which was also no problem, ecept for the color.
It seems that the code also uses the default background color of the menu.
My menu is contained within:
#container #menu ul li {
background: rgba(0, 0, 0, 0.8);
float: left;
position: relative;
list-style-type: none;
}
I build a class .onlink to determine which page i am, and use this to display the correct color:
#container #menu ul li a.onlink{
background-color: rgba(255, 255, 255, 0.9);
color:#000;
background: rgba(255, 255, 255, 0.9);
}
#container #menu ul li a.onlink:hover{
background: rgba(255, 255, 255,0);
}
When i hover over the menu bar, the color is correct, but when not hovering over it, the color is slightly off (gray), and seems to be a an articaft of the #container #menu ul li id.
Any suggestions on how to get the color of not hovering adjusted?

From the look of it (though I'm not entirely sure), it seems you want to have a transparent background-color, rather than a partially-transparent white background-color; that being the case then:
#container #menu ul li a.onlink {
background-color: transparent;
color:#000;
background: rgba(255, 255, 255, 0.9);
}
#container #menu ul li a.onlink:hover {
background-color: transparent;
}
The above, of course, means there is no difference in background-color between the hovered, and non-hovered, states, so the :hover rule (the second) could be entirely omitted from the stylesheet (assuming that background-color is the only property contained within that selector), to give only:
#container #menu ul li a.onlink {
background-color: transparent;
color:#000;
background: rgba(255, 255, 255, 0.9);
}
Of course, you could retain the rgba() colour notation, and simply keep the alpha (the fourth of the four numbers (the others being red, green and blue respectively) at 0 (fully-transparent), instead of 0.9 (90% opaque/almost entirely visible)):
#container #menu ul li a.onlink{
background: rgba(255,255,255,0);
color:#000;
background: rgba(255, 255, 255, 0.9);
}

try removing: background-color: rgba(255, 255, 255, 0.9);

Thanks for the input; your comment on the :hover set me on the right track. because the :hover line defines the background color. In my code i only defined the background color of the function , not of the block.
I actually added the class .onlink also to the list:
#container #menu up li.onlink{
background: rgba (255,255,255, 0.9)
}
This resulted in a correctly displayed effect.
Thanks for the suggestions.

Resources