I have a react js application witch contains a select with a dropdown. I want to apply styles for 2 states: when the mouse hover the dropdown item and when the dropdown item is focused.
.select__option.select__option--is-focused {
background: blue;
}
.select__option:hover {
background: gray;
}
Both styles work. If the user will navigate within dropdown with keyboard arrow (up/down) the will be applied blue color on the item, if he will hover the item will be applied gray color as background. ISSUE: When user hover the focused item which has blue background, the hover color overrides the blue, but i want to not override blue color even the hover is applied over focused element, so the focused element should keep everytime its color. How to fix that? https://codesandbox.io/s/codesandboxer-example-forked-y4zs8?file=/example.tsx:0-505
Just switch elements in place (so that later overwrites previous) or make .select__option.select__option--is-focused:hover{background: blue} as rule too
.select__option:hover {
background: gray;
}
.select__option.select__option--is-focused {
background: blue;
}
<div class="select__option">
.select__option
</div>
<div class="select__option select__option--is-focused">
.select__option.select__option--is-focused
</div>
If nothing else helps, then just write a rule that does explicitly apply blue background color when both conditions are met - the element has those class names, and is hovered. You can combine both into one single rule, by simply listing both selector expressions comma separated.
.select__option.select__option--is-focused,
.select__option.select__option--is-focused:hover {
background: blue;
}
Try the not() pseudo class:
.select__option:not(.select__option--is-selected):hover {
background: gray;
}
My bad, i gave the wrong class in the not(). updated it
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
I'm trying to code a website and every time I edit the images there's a mouseover effect and I want to have a plain image on the webpage. The image is grayed out and when I mouseover it's not. How can I make it stay normal without having to mouseover? When I click, it opens a link and just opens the same page. SOS.<img src="images/image.jpg" alt="image" class="border2" />
If you have CSS stylesheets they may be causing the difference, use inspect element on it and see what styles are active and click on the :hov then the :hover button next to the filter bar in the styles tab to see how it changes. Then look at the style side with hover activated and see where, if any, there are places with :hover in their selector. Next find the place in your stylesheet where that selector is and copy its contents into the selector without :hover
Example
<button class="btn">Press Me</button>
which would then be styled by both:
.btn {
background-color: white;
}
.btn:hover {
background-color: blue;
}
this would mean that when not hovered the button is white but then becomes blue when you hover over it. A similar thing may be happening to your image with something along the lines of:
.border2 {
background:#ffffff;
opacity: 0.5;
}
.border2:hover {
opacity: 1;
}
found this on Grey out all images other than active hover image
I know that press signal in css is :active, but i still can't find a proper way to make a toggle switch for the link.
For example, <a> has the color blue, when <a> will be pressed first time, it's color should be red, when it is pressed second time, it's color should blue again. So basically first press is a toggle switch from blue to red, and second is vice versa.
I have used :target action which didn't seem to work out:
a {
color: blue;
}
a:active {
color: red;
}
a:target {
color: red;
}
How could this be possible without use of JS? So i could toggle switch the link color to red on the first click, and then blue again at the second.
You can do it via checkboxes and labels.
HTML:
<input type="checkbox" id="t1" class="toggle">
<label for="t1">Link with toggling color</label>
CSS:
.toggle {
position: absolute;
left: -99em;
}
.toggle:not(:checked) + a {
color: blue;
}
.toggle:checked + a {
color: red;
}
Working example here.
This is not possible to achieve without JS. Links are not designed to be toggle elements, and CSS has nothing to track multiple clicks on an element (it is either being clicked or is not).
If you want to represent a toggle, then look at checkbox inputs instead. They have a :checked pseudo-class.
There is one way you could (sort of) achieve this purely with CSS but it would mean that, in its initial state the link would actually be unclickable, which probably wouldn't be desirable.
The trick is to set the pointer-events of the anchor tag to none, wrap it in another element with a tabindex attribute (to allow it to gain focus) and then, when the wrapping element receives focus, change the colour of the anchor and reset its pointer-events. On the next click, the link will receive focus but this will remove the focus from the wrapping element, which will revert the anchor's styles back to their initial state.
*{color:#000;font-family:sans-serif;outline:0;}
a{
color:#00f;
pointer-events:none;
}
span:focus>a{
color:#f00;
pointer-events:initial;
}
<span tabindex="-1">link</span>
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.
Is there a way to do this without javascript and just using CSS?
I have a navigation. The text within the anchor elements are black. Upon hover of the line item the line item becomes orange. At that point I would like to alter the child anchor element text to be white.
What I have right now is an anchor tag rule to be white when hovered. Because the anchor is smaller than the line item it means that, hovering over the line item doesn't change the text to white straight away, only when the mouse hovers over the center, where the anchor tag is.
I could post html but I don't think its necessary. Is it? Hope I'm making sense and that my question is clear.
Put another way, I'd like to alter an element based upon the hover state of it's parent element.
It is not possible to target the parent element using CSS selector. You can instead add a :hover rule to line item to change its background color. At the same time, add an additional rule that changes the color of the child link upon hover:
li:hover {
background: orange;
}
li:hover a {
color: white;
}
Demo
You can try this. Giving a tag display:block; will take the full width of your li element.
#menu li a:hover {
background: #FC6;/*added*/
}
#menu a {
color: #000;
dispaly:block;/*added*/
}
DEMO