My first time here so please be gentle. (oo just realised I was here last year)!
I'm trying to jazz up some rollovers with a nice fade. However the website layout doesn't use buttons but li
You can see an demo here. https://www.fireworkscrazy.co.uk/store_v8/
I want the mouseover on the top menu and side buttons to fade to red.
I've been playing around with the transition element and a:hover:before and a:hover:after but to no avail so I thought I would come and ask you geniuses on here.
Thanks in advance.
looks like the current hover effect is set as this (line 87 of basic-style.css):
.nav > li > a:hover{
background-color: #f5f5f5;
color: #262626;
}
If you want it to transition to red instead, simply change the background-color to the value 'red' or to the hex code of the shade of red you prefer. If you want it to 'fade', try adding a transition rule such as:
.nav > li > a:hover{
background-color: red;
color:#fff; /*white will look better on a red background than dark gray */
transition: 300ms;
}
Learn more about transitions here: http://www.w3schools.com/css/css3_transitions.asp
Related
When I hover over the 'Read my story' button in my about section on my homepage (https://howtogetrippedathome.com/), something strange happens.
When I hover the side of the button, only the button as a whole changes to red (but the text doesn't turn white). When I quickly hover over the text in the button, the text and the background of the text chagne color, but the rest of the button just slightly after.
I have read dozens of posts and tried everything, but I cannot make it work. I think it has to do with the element I am targeting, but I don't know how to do it right.
I use the following code:
.so-widget-sow-button .ow-button-base :hover {
color: #fff;
background-color: #ff2828;
transition: 0.5s;
}
Help is very much appreciated, as I am kind of lost by now.
I found this css in your stylesheet:
.so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:visited,
.so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:active,
.so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:hover {
color: #ff2828 !important;
}
which as you can see forces the text color of hovered links inside ow-button-base as red. Removing the a:hover line solves the conflict; I was able to solve the problem also adding this css:
.ow-button-base a.ow-icon-placement-left:hover {
color:white !important;
}
1) Remove the colors from the span, because you need the hover to be an your a tag to change
.so-widget-sow-button .ow-button-base :hover {
color: #fff; *--->remove this*
background-color: #ff2828;
transition: .3s; *---> change transition with 0.3s as it is on your a tag*
}
2) Add the new hover on your a tag an change to color of the span
.so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:hover span {
color: #fff;
transition: .3s;
}
3) Remove !important from the styling of the anchor tag
This is the problem
so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:hover {
color: #ff2828 !important;
}
It's overriding the color you put here.
.so-widget-sow-button .ow-button-base :hover {
color: #fff; <--- This one
background-color: #ff2828;
transition: .5s;
}
Make it stronger and/or remove the !important
this is because you have used color important in hover state of anchor,
please try below css that will resolve your issues.
.so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:hover > span{color:#fff}
You have to change the "a" tag color with .ow-button-base:hover selection
.ow-button-base:hover > a
{
color:#fff;
}
and also remove
color:#ff2828 !important
I cant for the life of me figure out how to style the bootstrap dropdown menus using CSS.
I can manage to get the background color to change but that's it. The links don't have an underline and the Hover background colour does not change. I haven't even started with the down arrows yet either!! Any advice?
Heres the code im trying:
#NAV .dropdown-menu { background-color:#273961; border-bottom: 5px solid #CCC;}
#NAV .dropdown-menu>li>a:link { background-color:#273961;}
#NAV .dropdown-menu>li>a:hover{ text-decoration: underline;}
Hopefully this helps.
ul.dropdown-menu {
border-bottom: 5px solid #CCC;
}
.dropdown-menu li:hover {
text-decoration: underline;
}
I was a little confused what you wanted to do with the background-color of the list items in your dropdown menu. Here's an example of one way to change the background color when hovering over each link. Using !important after a CSS attribute might help in some circumstances when you want to override any subsequent rules (but it might not be the BEST way to do this).
I recommend opening up your Chrome dev tools and playing around a bit until you get the desired results. I'm assuming you want to change the background-color of your list items when hovering to a different color than what you specified (#273961) since it is already that color to begin with?
.dropdown-menu li a:hover {
background-color: red !important;
}
The Inspinia AngularJS framework has a demo here for those who don't use it.
For the life of me, I cannot see how to change the background colour of the navigation menu on the left. It should be simple, but I just can't find it, even using the Chrome developer console.
[Update] I want to change the color programmatically from AngularJS, what's the best way to do that? Maybe add an Id to the background div?
Make some changes, according to the images below:
I hope to have helped in some way
i guess this will help u
body{
background-color: #F44336;
}
.nav-header{
background-color: #F44336;
background-image: none;
}
.nav > li.active{
background: #c7635b;
}
.navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus{
background-color: red;
}
.nav-header and other elements in your sidebar use background-image and those images are opaque, not showing the background color. You need to check (and reset) background-image property of items in your sidebar for this.
Example:
.nav-header {
background-image: unset;
}
#side-menu {
background-color: #933;
}
.nav > li.active {
background-color: #833;
}
Keep inspecting your elements until you find what rule sets the backgorund-image, background-color or background (shorthand) for the element, copy the selector of the currently applying rule and place it in your own stylesheet, changing the value of the property. Make sure you load it after the rest of your stylesheets.
There is no background-color defined in sidebar, its the background-color of body, and the middle content section has light grey bg color, so change the body-color and sidebar color will be changed.
smarter people than me!
I've been racking my brain for awhile with some css for this wordpress website On the navigation menu (Campus, National, World,...) I'm trying to do some custom css where when you hover your mouse over the menu items and they change color. Right now they only turn black except for the Campus menu item which changes to what I want for a moment then changes to black.
My attempt was to try this short css in the stylesheet, but it didn't work. I suspect I might have to adjust the upper-nested classes.
.menu-item-28 a:hover{
background:#1f61c4;
}
This is probably an easy question but my css-fu is pretty bad. Any help help is much appreciated!
Try changing your selector to
#menu-main-navigation li a:hover{
background-color:#1f61c4;
}
This will target any anchor (a) inside your main navigation (instead of only the one found under .menu-item-28 - ie. campus)
There is this CSS rule in the code
#nav nav > ul > li > a:hover {
background: #222222;
border-color: #222222;
color: #fff;
}
which causes the black background on hover. You probably can't change that, I suppose. But if you put another rule somewhere "later" (= below it) in the code, you can overwrite it with your own background color:
#nav nav > ul > li > a:hover {
background: #1f61c4;
}
I have included a jsfiddle to show you an example. I have the navigation ul items set with a white background and the font is a red color. When hovered over I want the two colors to swap, the background to become the red color and the font to become white. Before I put the anchor tags in it worked, but after the font does not change to the white color on hover. If I add this:
nav ul li a:hover{
color:white;
}
the font will change to white, but not when the box is hovered on, but only when the font itself is hovered on, but I want the font to change to white as the list item box is hovered on. Any help? Thanks!
jsfiddle: http://jsfiddle.net/xNZxF/
Add this:
nav ul li:hover a{
color:white;
}
jsFiddle example
To match the easing you may want to also add -webkit-transition: all .5s ease-in-out; to nav ul a.
jsFiddle example
Just add the following to your CSS.
nav ul li:hover > a {
color: white;
}
Also remove color: white; from nav ul li:hover. You where trying to change the text color of the text within the li while it was actually in the a. With nav ul li:hover > a you can change the color of a when the nav ul li is being hovered over. This doesn't give the text a fancy transition to it's hover color, but I think you can figure that out by yourself. Good luck!
Give this a go:
nav ul li:hover a {
color: white;
}