Limit :hover to the parent element - css

Here come my example (found some pretty photos on the internet for you): http://jsfiddle.net/xGPys/ (works on chrome only, if anyone finds why Firefox doesn't like it)
So the part that causes me trouble is there:
.imagepreview:hover a {
top: -61px;
height: 150px;
z-index: 1000;
}
What I want to achieve is: You should be able to pass you mouse on the whole column, and each image should open and close one after the other, right now, the opened photo covers the other ones, and so the :hover state is note removed from the <td>.
I could use a bit of Javascript but I'd prefer keeping it pure CSS.
Thanks !

Just set the pointer-events to none:
.imagepreview a {
/* ... other styles ... */
pointer-events: none;
}
.imagepreview:hover a {
top: -61px;
height: 150px;
z-index: 1000;
}
Here's your fiddle: http://jsfiddle.net/xGPys/1/
Warning: pointer-events is experimental. Use at your own discretion.

Related

Does my sr-only alternative seem correct to you?

display:none or visibility:hidden are not good ideas to hide a focusable element, because screen readers cannot see them.
This is the "traditional" way to hide an element from view but keep it accessible :
.sr-only {
border: 0;
clip: rect(0,0,0,0);
clip-path: inset(50%);
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
}
I started to use my own like this for check boxes, radio buttons that I style with their labels :
[type=radio], [type=checkbox] {
position: absolute; /* keeps it out of flow */
opacity: 0; /* makes it invisible */
pointer-events: none; /* being able to click the content below */
}
[type=radio] + label , [type=checkbox] + label {
/* custom styling */
}
[type=radio]:checked + label , [type=checkbox]:checked + label {
/* custom styling */
}
Do you see any big issue with that idea ?
New proposal edit after investigations :
.hidden {
position: absolute;
opacity: 0.001;
pointer-events: none;
}
/* OR */
.hidden {
position: absolute;
opacity: 0.001;
z-index: -999
}
For tests : https://jsfiddle.net/pLyo52f3/
I would suggest that the problem here is that you are applying .sr-only styling to style focusable form elements. If you look at a library like Bootstrap, they have a set of utility classes for focusable and non-focusable screen reader text. You'll note that in their example they are applying the "focusable" variant to anchor text.
Bootstrap indeed has custom styled radio buttons and other form elements. However, you'll note that they are not extending or otherwise leveraging their screen reader text styling. Instead, they are utilizing appearance: none to remove platform-specific styles and allow for custom styling of the form element. This is the idiomatic and accessible manner in which to achieve custom styled form elements.
Slugolicious's comment is quite apt. While you may not opt to leverage Bootstrap (or a similarly mature UI framework) directly, feel free to borrow liberally from them; they have spent years honing and iterating on this code to maximize consistency and accessibility across platforms. Spinning your own would likely be wasted effort.

Position: fixed on CSS media print seems to duplicate content on print?

Given the div:
...
<div id='section-to-print'>CONT
/*Content*/
</div>
...
And the CSS
#media print {
* {
-webkit-transition: none !important;
transition: none !important;
}
body * {
visibility: hidden;
}
#section-to-print {
position: fixed;
top: 0;
left: 0;
}
#section-to-print, #section-to-print * {
visibility: visible;
}
}
Whenever I print (e.g. ctrl+ p)it shows only whatever is in the /content/ region (as expected). However the content is duplicated. If I emulate the print media in chrome it shows correctly. Also, I noticed if I remove/change the position: fixed; in the CSS makes it work "properly" (not duplicating), but at the wrong position.
I couldn't find any similar problems on google and honestly I never ever saw this behavior before.
Does anybody know why is it duplicating the content when I try to print?
Also, I tried on more than 1 computer, same behavior on all.
I found a solution having the same problem. Please, try to use position static instead of fixed! Wierd right?
A few more information about the problem:
http://css-101.org/fixed-positioning/index.php

How to hack unsupported mix-blend-mode CSS property?

I'm programming gallery of images, with specific hover effect. When user comes over the image, I use ::before pseudoelement to create "curtain" over the div with image using mix-blend-mode CSS property:
div.img::after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
mix-blend-mode: soft-light;
background-color: red;
}
Resulting effect is like this:
But unluckily, IE (and some others according to caniuse) does not support this property and displays full red rectangle over the image and therefore it is not visible.
Is it possible to hack this mix-blend-mode behaviour to act like in Firefox or Chrome?
If not, is it possible to hide covering div or set it semi-transparent if and only-if mix-blend-mode is not supported?
Thank you
I know this is an old question, but you can also use the #supports feature query to detect if a certain property is or isn't available.
#supports not (mix-blend-mode: multiply) {
.image {
...
}
}
If you're interested, you can read more about the feature query at: https://developer.mozilla.org/en-US/docs/Web/CSS/#supports
If you don't want to use plain opacity as a fallback:
Approaches to cross-browser support
Javascript polyfill
This will be slow, and will not allow you to easily animate. However, it will let you create an alternate image for each of your matching images, and you can then fade the opacity or do other CSS transition tricks between the two.
http://codepen.io/brav0/pen/bJDxt (not my pen - uses multiply, not soft light)
Server side processing
Wouldn't be my first choice, but if you control the server-side code, you can prepare alternate images using server side imaging libraries (GD, etc)
Only enabling the effect for supporting browsers
Css hacks for detecting IE
#media screen { #media (min-width: 0px) {
div.img::after{ ... }
} }
Using JavaScript
if (window.getComputedStyle(document.body).mixBlendMode !== undefined)
$("div.img").addClass("curtain");
...and the CSS...
img.curtain::after { ... }

Is there a way to "clear" a CSS property as if never existed?

I am using a CDN css file which sets a "top" property for an item which was recently added as a new release. This 'top' property completely throws off the height of a list item in my code. I am certain this is the culprit by use of Firebug.
Normally, I am able to override previously directed CSS properties (such as height, color, etc) but is there a way to essentially say "forget that I told you to set top: 24px, I want you to ignore that".
In essence:
.some-class > a:after {
....
top: 24px;
}
(in another file)
.some-class > a:after {
top: gothehellaway
}
Note: I have tried setting to 0, auto, and inherit without successful results.
Update 1:
I have tried using the recommended inherit but it does not work in any tested browser. I have also used top: auto !important and top: inherit !important without luck.
Update 2:
Just noticed in the CDN CSS file, there are actually two calls for the exact same property (although no idea why Zurb did it this way. Damn you Foundation 4):
.top-bar-section .has-dropdown > a:after {
...
top: 50%;
}
.top-bar-section .has-dropdown > a:after {
...
top: 22.5px;
}
The initial keyword represents the browser’s default value for a property.
.some-class > a:after {
top: initial;
}
initial has long been supported in Firefox, Chrome, and Safari, but is not supported in Internet Explorer.
Use initial to set it
for example
.some-class > a:after { top:initial; }
HTH

Hide all elements except one div for print view

I have the following CSS for my print style:
* {
display:none;
}
#printableArea {
display:block;
}
I expected this to hide all elements, and only show the printableArea, however everything gets hidden. In print view, all I get is a blank page.
I have it included properly in the HEAD, with media="print" on this particular stylesheet.
If an element is not displayed, then none of its children will be displayed (no matter what their display property is set to).
* matches the <html> element, so the entire document is hidden.
You need to be more selective about what you hide.
You're taking the right general approach, but you want to use visibility: hidden instead of display: none so that you can set child elements to be visible.
See Print <div id=printarea></div> only?
html body * {
display:none;
}
#printableArea {
display:block;
}
Also, you may need an !important on #printableArea, but probably not.
Answering because I found this question while searching for this
Instead of 'display: none' you can use :
* {
visibility: hidden;
margin:0; padding:0;
}
#printableArea * {
visibility: visible;
}
source : https://www.concrete5.org/community/forums/5-7-discussion/need-to-print-a-certain-div-and-ignore-everythign-else-on-the-pa
You might try popping it up on top of everything. This solved 90% of my problems, then I just had to make a .noprint class and add it to a few straggling elements.
.print_area{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 9999;
background-color: #ffffff;
}
If you want to use JavaScript, you can try this simple snippet that doesn't even require jQuery:
document.body.innerHTML=document.getElementById('printableArea').innerHTML;
make a div wrap everything after the body tag. Before the wrap div, put the visible item's div.
I had to do this to make a simple username-password page, and needed to hide everything, except the half-opaque sign-in form's background. So, after the correct credentials were typed in, the form would animate out, and the half-opaque page cover would animate out, and finally, EVERYTHING aside would show up and you could use the page normally.
There is a one-line solution:
With JQuery
var selector = '';
$(document.head).append($('style').text('*{visibility:hidden}' + selector + '{visibility:visible}'));
Without JQuery
var selector = '';
document.head.appendChild(Object.assign(document.createElement('style'), { innerText: '*{visibility:hidden}' + selector + '{visibility:visible}' });
In both examples, set the selector variable to the selector you want. For example, div#page:hover or p.class1,p.class2
#media print {
* {
visibility: hidden;
}
/* Show element to print, and any children he has. */
.svgContainer, .svgContainer * {
visibility: initial;
}
}
Make sure any children elements are also visible. Remember that invisible elements still influence positionning of other elements in the page. In my (simple) case, I just added position: fixed; on .svgContainer (somewhere else).
Simply you can use the following code and assign "hide" class to that specific element you dont want to display on print page
<style type="text/css" media="print">
img
{
display:none;
}
.hide
{
display:none;
}
</style>
There is another clean way to achieve this:
* {
visibility: hidden;
}
#printableArea {
visibility: visible;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
That way you're going to get only the #printableArea element in the print view and all of the other elements will be hidden.

Resources