Why does nth-child prevent a:hover style working? - css

I have a simple list of images, styled to look like polaroid images.
Each image is rotated.
a.polaroid {
transform: rotate(-2deg);
}
A scale transform is used on hover.
a.polaroid:hover {
transform: scale(1.15);
}
All is well at this point.
However, some additional styling is added to alter the default rotation for certain images.
I.e. all even images, every 3rd image etc.
/* Rotate all even images 2 degrees */
li:nth-child(even) a.polaroid {
transform: rotate(1deg);
}
/* Cancel rotation for every 3rd image */
li:nth-child(3n) a.polaroid {
transform: none;
}
For some reason, adding these styles prevents the hover style applying for any image that is targeted by these styles. I.e. every even image and every 3rd image.
Any idea why???
Please see associated fiddle http://jsfiddle.net/46sdd/
Updated fiddle with solution is here: http://jsfiddle.net/46sdd/3/

Selector specificity (see also, MDN) - your a.polaroid:hover is not specific enough to override li:nth-child(3n) a.polaroid. The solution is to add the necessary specifics to former, so they match, and move the :hover selector below :nth-child ones:
li:nth-child(3n) a.polaroid
li a.polaroid:hover

Related

Problem with custom link cursor in Chrome

I want to use a custom cursor on hover for links. It works fine on Safari and Firefox, but on Chrome it jumps back to the default cursor for a millisecond, and then goes to my custom cursor.
Codepen: https://codepen.io/ford1234/pen/vwzRgJ
I've recreated the problem in Codepen but it also happens on the site I'm applying it to.
<div>
<p>Hello</p>
</div>
<style>
html {
cursor: url('http://telephoneavenue.art/wp-content/uploads/2019/02/black-01.png'), auto;
}
a:hover {
cursor: url('http://telephoneavenue.art/wp-content/uploads/2019/05/blacktriangle-small17px.png'), auto;
}
Expected result: A transition from the circle to the triangle.
Actual result: A transition from the circle, to the default hand pointer, to the triangle.
remove ":hover" on your selector.
your selector must be;
a{
cursor: url('http://telephoneavenue.art/wp-content/uploads/2019/05/blacktriangle-small17px.png'),
auto; }
Have you tried out a transition-duration or a transition-delay? This is used to define the duration of a specified transition. This is the length of time it will take for the targeted element to transition between two defined states.
.example {
transition-duration: 0s;
// or
transition-delay: -1s;
}
Also keep in mind that some features are only supported by certain versions of the browser.

CSS transform rotate effects on duplicated element instead of actual one

I have a problem where CSS Transform Rotate generates a new element and rotates it overlapping the actual one when I dynamically add the class to the element.
And if I set default rotate(deg) to element. The animation works fine.
I have no idea whether this is a feature or issue of CSS.
I build this element in Electron by ReactJS. Is it related to WebKit of Electron?
.parent-class > .btn-demo {
background: url(image.png) no-repeat center center;
transition: all .3s ease-in-out;
// if add default degree then it works fine
// transform: rotate(0deg);
}
.parent-class.animated > .btn-demo {
// it will copy a new element and overlap real one
transform: rotate(45deg);
}

Is it possible to smoothly hide html element and remove it using css attribute selector and property display:none?

I am looking for the way to smoothly hide html element and then remove it at all to deny any interaction with hidden elements. I change css property "opacity" from 1 to 0.00001 to do this. The problem is that element hide, but it's still on the screen and user can hover it. Is it possible to remove transparent element using display:none without JavaScript? I tried to do this with CSS attribute selectors, but it does not work.
.element[opacity^=0.00001] {
display:none;
}
http://jsfiddle.net/DkX3L/
Since you're probably already using JavaScript to hide the elements, the best method would be to use that to stop the interaction as well. But since you've asked for a CSS solution, you could use this (IE11+):
.element {
-webkit-transition: 2s;
transition: 2s;
}
.element:hover { /* .element.hidden */
opacity: 0;
pointer-events: none; /* <-- This one */
}
DEMO

Completely remove Opacity in Toastr.js?

Is there a way to REMOVE completely the Transparency on Toastr.js?
I tried to change the various lines on the .less files
.opacity(#opacity) {
#opacityPercent: 100; // instead of #opacity * 100;
opacity: 1; // instead of #opacity;
-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=#{opacityPercent})";
filter: ~"alpha(opacity=#{opacityPercent})";
}
and every place where it stated opacity(x) where x was not 1 but it still displays opacity.
I also tried to add the following lines on my own CSS
.toast {
opacity: 1;
}
#toast-container > div {
opacity: 1;
}
but i still get the semi opacity on div message display. On mouse over, the div color becomes full (no transparency). I'm trying to always have it full color (no transparency).
Try overriding it using !important:
.toast {
opacity: 1 !important;
}
#toast-container > div {
opacity: 1 !important;
}
You can also try "inspect element" in Chrome to see which css tag is causing the opacity.
If that doesn't work, can you perhaps provide a link to your page?
It Depends on What You Mean by "Remove"
If you don't want the mixin generating any CSS at all, but also don't want to remove all the mixin calls within the code, then just do this (comment out the code):
.opacity(#opacity) {
// #opacityPercent: #opacity * 100;
// opacity: #opacity;
//-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=#{opacityPercent})";
//filter: ~"alpha(opacity=#{opacityPercent})";
}
The above will "do nothing." If you want some type of CSS generated (for some reason, I cannot think of why), but you do not actually want to have that code apply any opacity setting in the browser, then give it a bogus value that the browsers will ignore, something like this:
.opacity(#opacity) {
#opacityPercent: bogus;
opacity: bogus;
-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=#{opacityPercent})";
filter: ~"alpha(opacity=#{opacityPercent})";
}
You can check out that the above generates no opacity within a browser by looking at this fiddle and examining it with an inspection tool (like Firebug, etc.).
I really believe you seek the first option however.
The following works with v2.1.3
#toast-container > div {
opacity: 1;
}
With the !important flag, there would be no fadeIn and fadeOut.

Hover opacity CSS Minimum image size

I am using the below CSS to create a hover opacity for images. I'd like to be able to set a minimum allowance so only images of a certain size take on the opacity.
Ex. My 225x225 images are correctly taking on the opacity, but so is my large header image. I only want images 225x225 and below to take on opacity when hovered over, not all.
img {
opacity: 1;
filter: alpha(opacity=40);
/* For IE8 and earlier */
}
img:hover {
opacity: .8;
filter: alpha(opacity=100);
/* For IE8 and earlier */
}
Thanks for any help!
You can't use media queries on a single element, so you are left to use JavaScript here. There are new CSS rules in the making for this, but it's not reliable to use them at this point.
What you could do is add a listener the img tags with jQuery and review the CSS on page-load. If the image's size does not meet your requirements towards the opacity level, you could cap it.
As Allendar pointed out in his answer; use JavaScript for this, however if JavaScript isn't an option then you'll have to make a class and add that CSS class to each element you want to have the opacity effect on hover.

Resources