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.
Related
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
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'm trying to make an :active style on my "a" tags, but on a mobile phone it's not the same, that I wrote.
I have done the following:
a {
display: block;
background-color: lightblue;
width: 100px;
color: black;
}
a:active {
background-color: skyblue;
}
It should do the following:
Have "a" tags, that are have a light blue background and when I tap on it it's background color change to sky blue. Yes it happens, BUT if I add a href="ANYTHING", then, when I tap on it it's background color is a bit darker, than sky blue, and the text's color changes to a bit blueish.
Sorry for my English, I tried my best.
You probably need to set custom styles for the rest of the pseudo classes that are related to the element: https://developer.mozilla.org/en-US/docs/Web/CSS/:link
Try adding visited to the list like this:
a:active, a:visited {
background-color: skyblue;
}
I'm using a Bootstrap button group and having an issue overriding some CSS states. I believe the state is :active:focus that is adding a dark blue background to the button while it is in the act of being clicked, which I've tried overriding with no success.
I've provided a Fiddle replicating the issue I'm experiencing.
Attempting to override this style with:
.btn-group label.btn-primary:active:focus {
background-color: #ffffff;
}
Any suggestions?
You cant chain those states together like that:
do them separately:
.btn-group label.btn-primary:active {
background-color: #ffffff;
}
.btn-group label.btn-focus{
background-color: #ffffff;
}
(btw i think you might want transparent and not #ffffff
https://jsfiddle.net/jer8k6ex/4/
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: