Change text-color on div :hover [closed] - css

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I can't seem to find how to change the text-color from black to white whenever I hover over the schedule over here http://apavtcongresso.staging.wpengine.com/
Scroll down to "PROGRAMA" and you'll find the schedule, it has a couple of tabs named "Day - 01, Day - 02" etc, inside there's black text that I wish to change to white whenever I hover over the tabs. I've already changed the :active color but I can't find the right classes to customize the css of hover, any help please?
Thanks.

.your-div-class:hover, .your-div-class:focus {
color: #fff;
}
side note: check in your code that .your-div-class or any class associated to its inner text hasn't a color assigned with !important, in that case either remove the !important or assign it to the hover too.
EDIT: try this:
.schedule-layout2 .schedule-nav li:hover .day-number {
color: #fff !important;
}
.schedule-layout2 .schedule-nav li:hover .schedule-date {
color: #fff !important;
}

Related

CSS everything selector problem with multiple :not() [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
there is a problem that I have had since I started using CSS everything selector [*] with multiple [:not()].
Examples below does not work as I tried:
.post-body *:not(.has-color):not(.has-bg){
color: red
}
.post-body *:not(.has-color)*:not(.has-bg){
color: red
}
.post-body *:not(.has-color .has-bg){
color: red
}
.post-body *:not(.has-color , .has-bg){
color: red
}
Imagine something like WordPress post content; I can not change the content whole structure but I do need to set a primary color for texts which do not have a specific background or text color. So I am trying to set Red Color to any element except elements that contain ".has-color" or ".has-bg" that is it there is no relation between them.
Has somebody solved this issue or even seemed to something like this?
Your first example should work, as shown in this CodePen, but as Louys notes, it’s hard to tell without any markup.
.post-body *:not(.has-color):not(.has-bg) {
color: red;
}

How to change sub menu items color [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I want to change color of sub menu in dropdown. Now it is white. When I change through customization both main and sub menu color changes. I only want to change sub menu color. How can I do that? My website is:
https://openwatersmarine.com.au
I used this CSS but it does not worked:
.primary-menu-ul .sub-menu{
color: blue;
}
This is a wordpress website.
I have tried this and it worked for me.
.row .primary-menu-ul .sub-menu li a{
color: blue;
}

CSS to produce Windows Style button [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I was tinkering around with a few websites in attempting to create and mimic a windows themed style buttons. What would the CSS style patterns be to basically mirror the buttons like the ones found in the picture below?
In the picture, there is an inactive state, hover state and a default state button
You need a combination of:
border-style
border-width
border-color
border-radius
background: linear-gradient
Read the documentation here:http://www.w3schools.com/css/default.asp
For both CSS and CSS3
For the gradient, use this online tool to generate the CSS for you: Colorzilla
Then you need to apply CSS border attribute.
Then you can use the CSS :hover selector to change it's looks upon the button element is hovered.
I hope this will give you a start. So play with these things first and let us know the results. We will then give you more details.
Start with your default state:
button {
border: 1px solid black;
}
Hover state:
button:hover {
border: 1px solid blue;
}
Disabled state:
button[disabled=disabled] {
border: 1px solid grey;
}
These styles are incomplete, but the selectors are the important thing.
The rounded corner effect is generated by adding border-radius: 3px; to the button css.
To get the gradients, you'll want to use a background with a linear-gradient; I recommend a tool like www.cssmatic.com/gradient-generator to generate the styles for you.

Bootstrap 3: Cannot remove outline from link [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
Firstly here's the link
When I click on the carousel's main panel there is a mysterious blue line appearing, it disappears after few seconds. I tried setting the outline to none but it did not work. The style codes from this pices of code which is bootstrap 3's default code:
a:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
Any help would be appreciated.
Add text-decoration:none to that a:focus rule (or create your own, correctly placed in your stylesheet) and you should be fine. Worked in dev tools.

How to set normal colors and hovering colors? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
Link: jsfiddle.net/d8p00ca5/2/
I want to give icons a certain color(lets say red) and text another color(black).
But when I hover the link, icon and text should have the same color(yellow).
How can I do that?
a:hover > .fa {
color:yellow;
}
Note, this selector is very general and may not be appropriate in all situations.
Alternatively,
a.circle:hover > .fa {
color:yellow;
}
Is a little more specific.
Jsfiddlde Demo
You just need to add .circle:hover .fa {color:yellow;}
http://jsfiddle.net/d8p00ca5/4/

Resources