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
Was getting into CSS and web development and I have seen some sites that have example a submit button or just an input where when the mouse/ cursor goes over the top of the element it would change the element,
To explain a bit better, the submit button might be red and black text, and if you hover over the submit button it would go black and change to red text,
I just wanted to know how that was done cause I would like to put that on my sites, thanks!
I have searched google alot for information on how to do this but I have come up with nothing, best regards,
Jack.
Use the :hover selector. See the following examples, how to do that:
button,
input[type="submit"] {
background-color:#000;
color:#f00;
}
button:hover,
input[type="submit"]:hover {
background-color:#f00;
color:#000;
}
<button>Test</button>
<input type="submit" value="Test"/>
Related
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;
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm trying to set a cursor: pointer property on an element.
.element {
cursor: pointer;
}
This would work, but so would
.element:hover {
cursor: pointer;
}
Which one is semantically correct ? I can't see how the cursor property would ever be useful outside of a hover event.
Both are "semantically" / technically correct. But happen to have the same effect in this case. I don't know why one would choose to utilize a pseudo class for it. Unless you want to change the pointer at :active only for instance.
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 have a page in which many elements of the same class are to the left, some in the center and some to the right, I also have many elements that sometimes are display:inline and sometimes display:block.
I ran a CSS validator that told me to put it into the stylesheet, but I don't feel like creating class1 left, class1 center, class1 right, class1 inline,...
Can I have something in my stylesheet so that I can do this
<div class="class1 left inline"></div>
Instead of this
<div class="class1" align="left" display="inline"></div>
Keep in mind that I have almost zero experience in CSS
Create your html structure like this u want to use.
<div class="class1 left inline"></div>
And in Css file create classes for the same like following:
left{
float:left;
}
right{
float:right;
}
inline{
display:inline;
}
class1{
/*all your style elements*/
}
Read these for more information:
https://css-tricks.com/all-about-floats/
https://css-tricks.com/centering-css-complete-guide/
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/
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 8 years ago.
Improve this question
I'm trying to take out text in a div, and replace it.
h2{content:none;}
h2:after{content:'CONTENT';}
I tried using text-indent, display:none, etc. Nothing is working. And no, I don't want to replace it with a picture. Please help, thanks.
You can try something like this:
HTML
<div id="bla">Hello world</div>
CSS
#bla:before {
content: "Goodbye planet";
position:absolute;
background-color:white;
}
Demo: http://jsfiddle.net/FHnks/1/
Note that content added via CSS is not a part of the DOM and will not be accessible via scripts.