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
Related
Hovering on the webpage works, but NOT as intended. I want the text color to change on hover over a list's item. At this point, the hover changes the color of the text ONLY when hovered over the text, but not on the item itself.
Vimeo video
On the first webpage, it can be seen how the hovering works only on the text itself, and on the second webpage, the color of the text changes when hovered over both list item and text. I want to make the first webpage's side menu just like that. I am using wordpress for the creation of the webpage and custom CSS for styling.
The current CSS code, related to hovering and color change:
.et_pb_widget ul li {
background-color: #f9f9f9;
padding: 10px;
}
.et_pb_widget ul li:hover {
background-color: #EEEEEE;
color: #ff0000 !important;
}
.et_pb_widget > ul > li > a:hover {
background-color: #EEEEEE;
color: #ff0000 !important;
}
.et_pb_widget body:hover {
color:#ff0000;
}
I would really appreciate it if you could help me out with this!
I'm trying to change the hover color of my sub-menu in the top navigation of my site but nothing seems to work. It appears to be picking up the grey color used in my footer but nowhere else as the hover color. This is the code I've been using to get it to work:
.navbar-inverse .dropdown-menu, a:hover {
color: #cc3300;
border-bottom-color: #cc3300;
border-bottom-width: 5px;
}
It could be something else in my other navbar and dropdown menu css codes that's overwriting it but I can't figure out where it is. Theoretically, this should work but it doesn't.
Any suggestions?
partyfavorz.com
Here this should help, you need to add the "!" tag as shown below for background and color:
.navbar-inverse .dropdown-menu a:hover {
background: #CC3300 !important;
color: #fff !important; }
Best regards! Edited to change the hover to red and keep the font to white.
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.
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
I have a background color on my links (on hover, rails-style). And I have an img inside an a-tag that I don't want to have a background on hover.
I tried
a:hover img{ background-color: #fff; }
but that's not doing anything. How do I exclude img-tags inside a-tags from the hover?
Thx,
MrB
edit: jsFiddle
http://jsfiddle.net/rasvf/1/
In the example: "google" has a red background on hover, as intended. But when you hover over the image, it also does. It's supposed not to have a hover background.
if i understand you correctly, i think you are trying to do something like this:
a:hover img{ visibility: hidden; }
or
a:hover img{ display: none; }
EDIT
In that case you want:
a:hover img {background-color: transparent;}
Example posted on: http://jsfiddle.net/6qwJy/
It's hard to understand your example. Say I have this piece of HTML:
<a class="foo" href="#"><img src="bar.gif"/> Click me</a>
then with these style rules
a#foo:hover { background-color: blue; }
a#foo img { background-color: white; }
the image background color will always be white, also on hover.
If however you have background images on the element that contains your link and you want that to show behind the foreground image, then you can't do this. In that case you'll have to wrap the "Click me" text of the link in a span and write in your stylesheet:
a#foo:hover span { background-color: blue; }
Is this what you intended?
Ah! I did it. Easy. I just put the not-to-have-a-background-image in a different div and then did:
.otherdiv a:hover{ background-color: transparent; }
a img {
vertical-align: bottom;
}
Ok, you won't believe me, but I had the same problem above and I resolved as follows:
I had something like this:
<img src"path/to/image.gif">
And in my CSS I had:
a:hover { text-decoration: underline; }
And, believe me, I just had to put the 'img' tag in the same line as the 'a' tag, like this:
<img src="path/to/img.gif">
And that was all!!!