I am setting up a simple animation to my button icon. The image in the button is supposed to go from 0.25 opacity default to 1 after hovering over it. Works well with chrome/edge, but firefox seems to ignore it (:hover).
The first guess was that firefox somehow does not support opacity. It does, as the default value of image set to 0.25 opacity is respected. There is no need for any prefixes what so ever. Also, the cursor does not change at all. Then thought maybe it is :hover, but that should have been 100% supported since the stone age.
Then it struck me that this could have been due to CSS grid level 2 layout design I am using, which actually is not yet fully implemented in browsers. I had enabled some layout flags in firefox but that has not brought the solution either. Anyhow making this sample shows it has nothing to do with the CSS grid layout.
I tried using javascript but did not help. I guess it is a bad practice anyway.
My last resort attempt was to try and increase specificity - no luck here either, go figure.
button {
padding: 20px 40px;
}
.images {
opacity: 0.25;
}
.images:hover {
opacity: 1;
cursor: pointer;
}
<button type="button"><img class="images" src="https://img.icons8.com/metro/160/settings.png"></button>
<button type="button"><img class="images" src="https://img.icons8.com/metro/160/settings.png"></button>
I expect the hover over increases the opacity of an image, as well as changes the cursor to pointer. I would be grateful for any feedback.
try this :
button {
padding: 20px 40px;
}
button .images {
opacity: 0.25;
}
button:hover .images{
opacity: 1;
}
button{
cursor: pointer;
}
<button type="button"><img class="images" src="https://img.icons8.com/metro/160/settings.png"></button>
<button type="button"><img class="images" src="https://img.icons8.com/metro/160/settings.png"></button>
I changed the way you call HTML elements in your CSS. For me it works on firefox 64.0.2 (64 bits).
EDIT:
Firefox does not ignore the :hover event. But the button element steal the priority of all mouse events. That's why inside element, as your <img> can't be hovered. This is simply the way Firefox interprets this code.
You can also have a look on this post.
Related
I want to show a image preview of a link using CSS. The behavior is something like this, when an user hovers over the link, the image preview appears after 1sec, but on hovering out, the preview is removed immediately. Now to ensure the preview appears after 1sec, I have used the transition property as
transition-property: visibility; transition-delay: 1s. While this is ensuring the preview gets visible after 1sec, it's transition from visible to hidden is also delayed for 1sec for obvious reason. Can I make sure that only the transition from hidden to visible does take 1sec, and not the vice versa using CSS?
You sadly showed no code.
But I assume you had the transition property on a class or id... and the :hover just changing a property, which is good in order to apply the transition on mouse in and out.
Weird thing is you mention the visibility property, which cannot be transitionned because it is not a "number" property. Maybe you meant opacity...
If you have the transition property in the :hover rule... It apply on hover (read on mouse enter) but squarely do not apply no "not hover" (read mouse out).
#target{
opacity: 0;
height: 400px;
width: 400px;
background: blue;
}
#target:hover{
opacity: 1;
transition: 1s;
}
<div id="target"></div>
i suspect there's a problem with the way browsers are applying default styles onto things like <button> elements
to fully understand my conundrum, this involves the shadow dom, and i'll explain that at the end, however for now, let's just focus on a version of the problem i have isolated to a simple question about CSS:
how can i reset a <button> to it's original browser default styling?
i've tried setting properties like border: initial;, and border: unset; and border: inherit;, but in every case, setting any of these css properties on a button element causes the browser to release any of its default styling
please see the following example on codepen
<button>control</button>
<button id="b1">b1</button>
<button id="b2">b2</button>
<button id="b3">b3</button>
<button id="b4">b4</button>
<button id="b5">b5</button>
<button id="b6">b6</button>
<style>
#b1 { background: initial; }
#b2 { background: unset; }
#b3 { background: inherit; }
#b4 { border: initial; }
#b5 { border: unset; }
#b6 { border: inherit; }
</style>
in this example, the first button is a control, so we can see the default browser styling
on the buttons where we try to reset background, the button totally changes style, the background disappears, and even the border changes
on the buttons where we try to reset border, the button totally changes, but oddly in a different way -- here the border disappears, and the background changes
what explains these strange and unexpected results?
why do i need to reset a button, you ask? that seems like a weird thing to do, you think? consider my use case involving web component and the shadow dom:
i'm using the shadow dom with some web components
i want to allow users to OPTIONALLY set styles on some shadow <button>s
so i set button { border: var(--button-border); }
however even when the user doesn't supply --button-border, the button is visually manged and browser styles are not applied
even setting button { border: var(--button-border, initial); } and the other examples don't work
how can i give the users of my components a hook to style the buttons away from the default, however leaving intact the default buttons when they decide not to apply any button styles?
i feel like i'm stuck in a pickle here, and the browser might not have an answer to this problem — i fear that i'll have to either abandon the default styling for buttons within my components (bad practice, the default buttons are meant to be familiar to users), otherwise abandon any custom styling to the buttons (bad for designers that's for sure) — is there any hope to salvage this situation?
Try:
button {
background: none;
border: none;
padding: 0;
}
I'm designing a clickable panel for an html app which contains multiple text elements and images.
From what I understand this is generally done with a div. Something like this:
<div class="myButton">
<h2>Text</h2>
<h3>Some more text</h3>
<img ...>
</div>
With a bit of styling and hooking up the click event this works fine but I am having problem with styling the active state:
.myButton {
cursor:pointer;
}
.myButton:active{
-ms-transition-duration: 0.2s;
-ms-transform: scale(0.95);
}
In this example I'm trying to do a css animation (IE only) but this could really be anything.
The problem is that the active state only works when I click on the div but doesn't work when I click on any of the children of the div.
Here is a JS Fiddle to show the scenario:
http://jsfiddle.net/S9JrH/13/
UPDATE: Thanks to David Thomas for pointing out a typo in the code and confirming that this works in Chrome.
Unfortunately, in IE10 this only works when you click on the lower part of the div, away from the text.
Does anyone know how to get this working properly in IE10?
Currently not possible (I think)
From what I can gather, this is currently not possible as the :active state of a child is not propagated up to the parent div. Both Internet Explorer 10 and Opera 11.64 failed to propagate the :active state up to the parent when testing with div elements.
Fiddle: http://jsfiddle.net/jonathansampson/UrN39/
Workaround
The only other solution that comes to mind would be to use event propagation in JavaScript. Fortunately the events of a mousedown will propagate up on the DOM, and onto the parent div. The following example utilizes jQuery:
$(".myButton").on("mousedown mouseup mouseleave", function(e){
$(this).toggleClass( "active", e.type === "mousedown" );
});
Note here that I have modified the :active pseudo-class to be an actual class .active. This has been tested in IE10 and works. Given the approach, it should work without any problem in just about every major browser.
Fiddle: http://jsfiddle.net/jonathansampson/S9JrH/8/
Why don't you use HTML <button> element. It's created for your case. Div doesn't take focus, while button gets.
You can use the CSS pointer-events: none; on a child element that you would like to disregard mouse events and it will bubble up appropriately to its parent.
I overlay the the element using :after so that children are not clickable.
.myButton:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
opacity: 0;
filter: alpha(opacity=0);
}
.myButton:active, .myButton *:active{
-ms-transition-duration: 0.2s;
-ms-transform: scale(0.95);
}
I will be honest I have no idea if you can use *:pseudo-selector in IE but chrome you can so it's worth a shot.
Anyone know of a way to get the zOrder to work differently for visual vs mouse events?
I have a <div> element that I am placing higher in the zOrder which is slightly transparent to highlight something but it is interfering with a :hover css style over the original element.
I either need to make the <div> invisible to the mouse or have it's mouse zOrder different from it's visual zOrder. This would be in HTML, never heard of anything that would allow this, anyone else hear anything?
I guess I'm not sure why a sample would be needed for this but it would be something like this:
<style>
#a1:hover {
background-color: red;
}
#c1 {
position: absolute;
z-index: 10;
width: 100px;
height: 100px;
opacity: 0.3;
background-color: green;
}
</style>
<div id="a1">
<span id="b1">Sample</span>
</div>
<div id="c1"> </div>
The above sample probably only serves to complicate the question, however the div#c1 is position over the rest of the elements in a higher z-order with a transparent green color.
I would like the div#a1:hover css style to still have effect when the mouse is over the a1, in the above example the div#c1 is also in the same position and so it receives the :hover effect (if there were one). I would like to have div#c1 to have a different mouse z-order such that mouse events 'pass through' it to the underlying elements (causing the a1:hover to occur)
[I need] to make the <div> invisible to the mouse
overlay on clickable region - CSS
How to make an element transparent to clicks but still visible?
You can use pointer-events:
none.
It works "everywhere" (Chrome,
Firefox, Safari) except Internet
Explorer (and Opera, if that matters).
http://jsfiddle.net/QC5Yw/
In the likely case that the browser support for pointer-events isn't acceptable, you'll have to use JavaScript.
So, I have a DIV full of four HTML buttons that use an image instead of any text. Using CSS, I style it so that the img is the same width as its parent button. On three of the four buttons, they will always carry the cursor: pointer attribute because they will always be clickable. The fourth button, however, will occasionally be in a state in which it is disabled, so I have to toggle the CSS between cursor: pointer and cursor: default.
As my code stands, this works properly in Chrome and IE 7/8/9 (6 is not in my supported audience), however Firefox does not change cursor from default for any of them, regardless of if one of the buttons are disabled. Note that while this does work when I apply the cursor attribute to the parent BUTTON element, I'd prefer to use CSS to have the cursor change rather than use any client-side Javascript. Since this works in two of the three modern browsers I'm testing (including IE7, mind you!), I thought it should be possible in FF too.
Here's the HTML markup that I have:
<button id="btn1" class="my-button"><img src="/path/to/my-img1.gif" alt="Img1" /></button>
<button id="btn2" class="my-button"><img src="/path/to/my-img2.gif" alt="Img2" /></button>
<button id="btn3" class="my-button"><img src="/path/to/my-img3.gif" alt="Img3" /></button>
<button id="btn4" class="my-button"><img src="/path/to/my-img4.gif" alt="Img4" /></button>
And here are the CSS classes that I have designated for this markup, as well:
<style>
.my-button {
display: block;
float: left;
margin: 0px;
padding: 0px;
vertical-align: top;
border: none;
background: none;
}
.my-button img {
cursor: pointer;
}
.my-button img .disabled {
cursor: default;
}
</style>
And for anyone with any of that pesky curiosity, all of the click events and action is handled with jQuery depending on whatever business logic I need to go with it and the surrounding page.
If there's more information that I can furnish, please let me know. I feel like I came across a Firefox stumbling block here.
Edit: For reference, I'm using Firefox 4.0 with Firebug installed. Same behavior whether I have a Firebug on for that tab or not. Chrome is up-to-date, currently at version 10.0.648.204.
Edit 2: As I've denoted in the comments below, I still have not figured out a solution to this issue, but have settled on using #wdm's answer as a temporary solution - this way Firefox gets cursor: pointer set for all buttons regardless of state, and Chrome and IE will obey the CSS I put forth for the embedded img in each button tag. If I find out what's going on in my code or if someone else finds a proper solution for Firefox, I'll move the answer there. Thanks again for the suggestions!
Have you tried?
.my-button {
cursor: pointer;
}
EDIT: You could also make a separate class with "cursor:pointer" and use jQuery's .addClass() .removeClass() depending on the state. Or have jQuery directly alter the css with
.css("cursor", "pointer");
EDIT: One more idea...
button {
cursor: pointer;
}
button:disabled {
cursor: default;
}
Seems to be working for me in all major browsers.
Two possible fixes:
1 - Use <input type="image" src="/path/to/my-img1.gif"> instead of nesting <img> in <button>
2 - Use .mybutton:hover { cursor: pointer; } for the CSS.
The issue is that .disabled is a class, not a pseudo-class. It matches any <button class="disabled...
If you want to select every disabled button, you have to use the :disabled pseudo-class, which automatically selects all the buttons in the disabled state.
I believe that the correct version of your code would be as follows, though I cannot check it at this time:
.my-button :disabled img {
cursor: default;
}
The pseudo-class is defined by the w3c here: http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#UIstates
They have a demo of it: http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/full/flat/css3-modsel-24.html