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
Related
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
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 have a link (styled as a button):
go to external site
And I have a hover on this button class, like:
.button {
background-color: green;
}
.button:hover {
background-color: red;
}
So far, no problem. I hover the button, it turns red. I click it and a new page opens in a new tab. When I go back to my website the hover is gone and the button is green again. BUT that only works in some browsers!
In chrome (my version 47.0.2526.80) my button hovers red, I click on the external page and when I go back to my site the button still shows the hovered red color. Only if I move my cursor the hover deactivates. Like somehow the hover is sticky.
Has anyone experienced this issue? Is this a browser bug? Any ideas for a workaround?
Use focus, it did the trick for me :)
Here is a codepen
http://codepen.io/anon/pen/YwEvod
.button:focus {
background-color: green;
}
a:visited, a:focus {
color: green;
}
try that - if not it may just be chrome
I have a bootstrap link button, but it is really just for show as the reason for it is that I wanted an element that I can label with an id.
When I hover over the button though, the cursor changes to a clickable cursor and the button text content gets highlighted also.
Of course clicking on the button will not do anything. However, I do not want the cursor change and the highlight.
Is there a way to achieve this?
By default the style property for cursor is set to pointer on hover.
Lets say your button id was fake-button (use a "." instead of a "#" if you want it to be a class), this is the style you would need:
#fake-button:hover{
text-decoration: none;
cursor: initial;
background-color: initial;
}
I can only make assumptions and general suggestions without seeing any of your code.
Add a new class to the button and then add it to the CSS with declaration cursor: default to make the cursor default and you have to reset the background color:
HTML:
<button class="button button-reset-stuff"></button>
CSS:
.button-reset-stuff:hover {
cursor: default;
background: red; /* red being the default color of the button, which I don't know without a sample of your code */
}
Let's say I have the following HTML:
<a href="#">
<svg class="icon">
<!-- SVG content -->
</svg>
Link text
</a>
And the following CSS:
a:hover {
color: #0074D9;
}
icon:hover {
fill: #0074D9;
}
Now I want a hover effect (let's say a color change) that acts on the whole a group. That is, the user should see both the icon and the text changing color when hovering over the a element.
Something like this (from the Instapaper website):
Right now, using the markup and the style rules above, i'm only able to get this on Chrome:
Hovering over the text doesn't affect the icon. Hovering over the icon works:
Seems like a trivial task but after some failed attempts I realized that I'm probably missing something.
Found the answer on SO right after I posted my question...
Basically I need to "set the color of the icon class that is inside a hovered a element".
So this works for me:
a:hover .icon {
fill: $0074D9;
}