CSS3 Element with Opacity:0 (Invisible) Responds to Mouse Events

CSS3 Element with Opacity:0 (invisible) responds to mouse events

If you're setting your div to have an opacity of zero, you're still going to be able to interact with the "invisible" item. You want to set it to display:none instead. You could do both, allowing the div to fade out to zero and then tack on the display:none when the animation has finished.

How to make an element with opacity 0 unclickable

The implementation they used was to use z-index property in order to change the layer of access users mouse will refer to. Meaning that the element with lower z-index would be in down layer of elements with higher z-index. note that default value for z-index is 1. Just give nav element the z-index:-1; and the content Layer z-index:1 or higher to achieve proper react.

visibility: hidden; AFTER opacity: 0;

If the object should not be there, use .fadeOut(1000) instead.

visibility:hidden vs display:none vs opacity:0

The answer found here will answer your first question (most likely display:none as the space is collapsed completely).

To your second question, tools such as this will probably be useful for you. However 40,000 divs sounds like way too many and you will probably have better performance using canvas or SVG (for example, using the KineticJS library as this handles animations - transformation, rotation, scale, etc.) for you.

Does opacity:0 have exactly the same effect as visibility:hidden

Here is a compilation of verified information from the various answers.

Each of these CSS properties is unique. In addition to rendering an element not visible, they have the following additional effect(s):

1. Collapses the space that the element would normally occupy
2. Responds to events (e.g., click, keypress)
3. Participates in the taborder

                     collapse events taborder
opacity: 0              No     Yes     Yes
visibility: hidden      No     No      No
visibility: collapse   Yes*    No      No
display: none          Yes     No      No

* Yes inside a table element, otherwise No.

Within CSS what is the difference between opacity:0 and display:none?

display: none lets the element disappear. Just like it isn't present. This means your layout may change.

opacity: 0 this one just makes your element invisible. It doesn't take any effect on your layout.

Click through div to underlying elements

Yes, you CAN do this.

Using pointer-events: none along with CSS conditional statements for IE11 (does not work in IE10 or below), you can get a cross browser compatible solution for this problem.

Using AlphaImageLoader, you can even put transparent .PNG/.GIFs in the overlay div and have clicks flow through to elements underneath.

CSS:

pointer-events: none;
background: url('your_transparent.png');

IE11 conditional:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;

Here is a basic example page with all the code.

Invisible elements don't receive mouse events

The solution in the end was annoyingly simple. All that was needed was to give the invisible elements the following styling:

background-color: white;
opacity: 0;
filter: alpha(opacity=0); /* for old IE versions */

This leaves the elements invisible, but still responsive to mouse events.

MouseEvent swallowed if element hidden by css

Problem with click is when the item is hidden, the click action can not be completed. So you can switch to mousedown instead of click

document.getElementById("test_click").addEventListener("mousedown", function(){    console.log("Clicked");});

#test_container {      position: relative;       display: inline-block;    }        #test_click {      position: absolute;      display: none;      left: 100%;      top: 50%;    }        #test_input:focus + #test_click {      display: inline;    }        #test_input:focus + #test_click:hover {      color: dodgerblue;      cursor: pointer;    }

<div id="test_container">    <input type="text" id="test_input" placeholder="focus me...">    <span id="test_click">CLICK</span>  </div>    <h3>Click on the input and "CLICK" appears, click on "CLICK" and "CLICK" hides and no JS event is triggered although it is attached. Then, remove "display: none;" from CSS and try click again, the JS event is triggered.</h3>

---

Related Topics