I am trying to create a button with text inside. I want it so that when you hover over the box, the color of the box changes to white, and the colour of the text changes to blue.
How can I add css to make my text and box change colors on hover?
Edited: I got the html snippet for that from another part of the website template I am editing. It is basically a box that does exactly what I have outline above. I then placed it inside the list tag of the menu html, hoping that it will just transfer the functionality but it didn't work. So I tried to add the [hover:] but it still isn't working.
I know I am doing something wrong but I don't know enough to know what it is.
Code snippet is for html:
Upload resources
Use the :hover pseudo selector
e.g.
button {
color: white;
background: blue;
}
button:hover {
color: blue;
background: white;
}
Of course, replace with the actual hex codes you need rather than the colour names above, and any valid property can be used, e.g. border, text-decoration etc.
Use :hover pseudo selector
element{
color: white;
background: blue;
}
element:hover{
color: blue;
background: white;
}
You can check these at Click Here
Related
if you go here and add "Piept de pui la gratar" to your cart, there will be a popup.
I tried modifying the close button's CSS because I want it fully yellow (including hover and non-hover states), but it just doesn't seem to work.
I've tried setting the color and background-color. The background color seems to work, but I don't want to change it. Setting the color to yellow just doesn't seem to make it. Any help is appreciated.
CSS Code:-
a#thp-close-id {
color:yellow;
background-color: yellow;
}
Also tried:-
.thp-close {
color: yellow;
background-color: yellow;
}
I also tried flagging the color property as !important, but it didn't work.
The reason why it doesn't work, it's because you are trying to apply those styles to the wrong 'element', as the close button uses its pseudo classes, see screen:
So in order to achieve what you need, try writing this css instead:
.thp-close:before,
.thp-close:after {
background-color: #f4c001;
}
I have an 'a' tag that is a normal link to another webpage.
I want to disable the default link appearance unless the mouse cursor is hovering over the link, when the default normal link appearance should be restored.
This is what I have tried so far:
(HTML)
example
(CSS)
a {
color: #000;
text-decoration: none;
}
a:hover {
color: unset;
text-decoration: underline;
}
JS fiddle example of that code here
The problem is that during the mouse hover the link color remains black, and does not unset or restore to the original link blue. Is there a special CSS keyword for "original setting" or something like that?
The value for original setting you're looking for is called initial.
a:hover {
color: initial
}
However, that might make the link black. Which means it wouldn't work for you in this case. You can get around this another way though, through your a style. Use the inverse of :hover using the :not selector.
a:not(:hover){
color: #000;
text-decoration: none;
}
Hi, I'm Link.
The way it works is applying the style to your link, as long as it's not the hover effect. a alone would style the :hover too, which we don't want.
Or if that doesn't work in your environment, you could style the link with the default colors:
a { color: #000; text-decoration: none; }
a:hover {color: #0000EE; text-decoration: underline; }
Hi, I'm Link.
That should work everywhere, as it's a regular color change. However, do note that the default color might slightly vary browser to browser... the perk of this is that the color stays the same across all browsers, I guess.
The difference between the middle and last piece of code is that the middle one uses the default browser settings, while the last one pushes in your own blue.
I've got a common button set in my css. Also 've got a hover set to it.
.myBtn {
background-color: #f60;
border: none;
font-size: 12px;
}
.myBtn:hover {
background-color: #fff;
}
.myBtn is mostly on a black background, so the button is visible on hover state. But when .myBtn is on a white background, the button disappears because .myBtn hover color and the page background colour are the same.
My question is it possible to use .myBtn for all buttons create 2 different hover states?
e.g.:
.myBtn:hover1 {
background-color: #fff;
}
.myBtn:hover2 {
background-color: #000;
}
No, two hovers on one class won't work. Also when you declare two after each other, the stylesheet will be read cascade, so only the last will apply.
A possible solution would be to add an extra class.
.myBtn {
background-color: #f60;
border: none;
font-size: 12px;
}
.myBtn:hover {
background-color: #fff;
}
.myBtn.onWhite:hover {
background-color: #000;
}
Then you'll only need to add an extra class on the buttons on a light background <button class="myBtn onWhite">.
It is not possible to create 2 hover effects for a same class. You can either use a different class and provide hover to that or use jQuery to provide that effect.
In what way do you change the background color? By hard coding your background-color? Or it's already written in two classes that when you trigger something, the html code will change the class name and thus the background?
If it's hard code I'm afraid you have to hard code the Btn class as well. But if it's triggered by something you can have another Btn class name and will be triggered together with background color.
I have this in line:
<div class="blue-car">
Car
</div>
<div class="iColor">
Blue
<div>
.blue-car:hover { color: red; }
.iColor:hover { color: read; }
I would like to make when someone hover to Car div second div which iColor change css and when hover to iColor div blue-car change css.
ie. I hover to 'Car' , 'Blue' will change color to red and when I hover to 'Blue' , 'Car' will change color to red, I want to make people aware that this two link is related.
I would love to have this in css only. No jquery. I have tried many no achievement at this moment.
Let me clear this, here is an example on this site. You could see when you hover to a country map, css link on right side will change, and you could see when you hover to a country link, country map css will change. This means this two div work each other. How they do this on this site: http://www.avito.ru
To start, CSS does NOT have a previous sibling operator. The only siblings that can be selected are adjacent (using +) or general (using ~).
It is possible to achieve the effect that you are seeking using only HTML and CSS. Below is one solution: http://jsfiddle.net/KGabX/. Basically, the .area is displayed as a table, which makes it wrap around the link and the image. However, the link is positioned absolutely, which prevents it from being "included" in a territory wrapped by the .area. This way, the .area is wrapped only around the image. Then, hovering over the .area we highlight the link. And, by hovering over the link we highlight the image.
Markup:
<div class = "area">
Link
<img src = "http://placehold.it/100x100" />
</div>
Styles:
.area {
display: table;
position: relative;
}
.area:hover > a {
color: red;
}
.area > img {
cursor: pointer
}
.area > a {
position: absolute;
right: -50px;
top: 50%;
font: bold 15px/2 Sans-Serif;
color: #000;
text-decoration: none;
margin-top: -15px;
}
.area > a:hover {
color: initial;
text-decoration: underline;
}
.area > a:hover + img {
opacity: 0.5;
}
Although I could not interpret what you wrote very well, I immediately noticed a flaw in your css selector.
Change your code to this:
<style>
.blue-car:hover a { color: red; }
.iColor:hover a { color: red; }
</style>
What's different about it? iColor:hover a. Look at the a, anchor selector. It was added because your previous CSS was only selecting the div. In css the child element, in this case the anchor, will supersede it's parents. There's two ways you can approach this. The first, or make the anchor tags color in css inherit.
If this wasn't your problem I'll fix my answer.
I'm not quite sure what you're asking because your question is a bit unclear.
From what I can understand, your issue stems from the fact that you're referring to the color property of the div, rather than the color property of the link.
That's a simple fix: all you need to do is drill down through the div to the link.
.blue-car:hover a{
color: red;
}
.iColor:hover a{
color: red;
}
Demo
Keep in mind that this isn't the best way to do this unless you absolutely need to refer to the links within the context of the div. I understand that your question fits into a broader context within your code, but for the example you gave here, all you really need is this:
a:hover{
color: red;
}
Again, I realize that you may need to change the colors or be more specific, but there's probably a better way to do this, even if that's the case.
The issue with this particular implementation is that your div is larger than your link, and a hover on your div is what activates the color change, so you'll run into this issue:
I hate it when I'm browsing and end up selecting text or elements on a webpage by accident; everything turns blue! So for the moment, I'm using this class on the parts of the page where the user could mistakenly select things:
.NoSelect{
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;}
This works fine but the problem is that I end up with lots of divs that have this class.
Is there a way to change the color of selected text and selected elements and make it transparent?
Thanks.
You can use the ::selection CSS attribute.
for everything:
::selection { background: transparent; }
or just p tags, for example:
p::selection { background: transparent; }
Here's an example.