Css: Is a Hidden Object Clickable

CSS: Is a hidden object clickable?

With display: none it is still part of the DOM. It just isn't rendered in the viewport.

As for clicks on elements with visibility: hidden, the events are not fired.

jsFiddle.

$('div').click(function() {    alert('Hello')});

div {    width: 100%;    height: 100%;    visibility: hidden; }

<div>abc</div>

Clicking trough a visibility:hidden element

With my current code, I think the z-index: -1; in #about is the problem: #blue_border is an image background and it's upper my "about" div... So I'm trying to find a way to replace that background.
Edit:

Okay. I figured out that the element with z-index: -1; will never be clickable the way I want to.
So I decided to reverse everything: the logo has now the property z-index: -1; and the about div (which is upper now) is hidden until the hover trigger. I also changed my background image by a border.
My code now :

/*Under #about and visible*/ 
#logo {
  z-index: -1;
}
.blue_border {
  width: 600px;
  height: 600px;
  border: 15px solid #71d1f4;
  border-radius: 100%;
  /*background-image: url("./border.png");
  background-repeat: no-repeat;*/
  background-position: 50%;
}
/*Hidden first*/
#about {
  opacity: 0;
  visibility: hidden;
  position: relative;
  margin-top: -605px;
  width: 600px;
  height: 600px;
  border-radius: 100%;
  background-color: #25B8EE;
  -webkit-transition: opacity 600ms, visibility 600ms;
  -o-transition: opacity 600ms, visibility 600ms;
  -moz-transition: opacity 600ms, visibility 600ms;
  transition: opacity 600ms, visibility 600ms;
}
/*Unhidden on hover*/
.blue_border:hover #about
{
  opacity: 1;
  visibility: visible;
}

I didn't changed my html

Thanks anyway guys. It was my very first question and I'm glad that some of you already answered me !

make an input invisible but clickable through CSS?

Adding opacity: 0 to the input might be a start. Not sure about browser support, but it seems to work on the newest versions of Firefox, Chrome and Safari.

.main {    position: relative}.main > div {    width: 200px;    height: 200px;    background: #f00;}input {    width: 100%;    height: 100%;    position: absolute;    top: 0;    left: 0;    opacity: 0;}input:checked + div {    background: #000}

<div class="main">    <input type="checkbox" />    <div></div></div>

Prevent elements in hidden div to be 'clickable'

A couple of pointers:

jQuery fadeOut, fadeIn, fadeToggle
CSS3 "pointer-events"

You could make something like:

$('.notify-box').fadeToggle().toggleClass('show');

// either hide the box using css OR on initialization:
$('.notify-box').fadeOut(0).removeClass('show');

How to make links in a hidden list items clickable

When you click the link, the image input will loose focus (blur) and the links disappear
The blur event takes place before the click event, and so you cannot use the click on something that is not there.

Use :focus-within on the parent

/*********** HIDDEN MENU section  *************/
#hidden-menu-items {  display: none;  position: absolute;  z-index: 2;}

/******* This displays the menu on click *******/
input[type=image] {  cursor: pointer;}
#hidden-menu:focus-within {  outline: none;}
#hidden-menu:focus-within #hidden-menu-items {  display: block;}

<!-- Hidden Mobile Menu-->
<div id="hidden-menu">  <input type="image" src="images/menu-button-red-png.png" alt="menu-button" class="menu-button">
  <!-- Hidden Menu Items-->
  <ul id="hidden-menu-items">    <li><a href="#title">About the avengers</a></li>    <li><a href="#avengers">Meet our heros</a></li>    <li><a href="#movies-list">Movie Timeline</a></li>    <li><a href="">Upcoming Movies</a></li>  </ul></div>

JQuery: How to fire click event on hidden element?

Put the flashing element inside another element, and put the handler on that parent element. Also, you might change the visibility property of the flashing element, not the display of the flashing element, so that it doesn't change the layout of your page every time it appears or disappears.

const child = $('#child');let visible = true;var flashToggle = setInterval(function() {  visible = !visible;  child.css('visibility',    visible    ? 'visible'    : 'hidden'  );}, 500)
$("#container").on("click", function(e) {  clearInterval(flashToggle);  $(this).hide();})

div {  background-color: yellow;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">  <div id="child">Flashing element</div></div>

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.

Making an element visible and hide upon click

Try to toggle the visibility property based on current value of it,

function showMask() {
    var node = document.getElementById('mask123')
    var visibility = node.style.visibility;
    node.style.visibility = visibility == "visible" ? 'hidden' : "visible"
}

You are accessing the jquery's is() function over a plain node object. Node object doesn't have function called is in its prototype.

How to show/hide div on click with stricly HTML/CSS

Html

<label for="toggle-1"> Button </label>
<input type="checkbox" id="toggle-1">
<div class="facebook"> Facebook Content</div>

CSS

/* Checkbox Hack */

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
label { 
  -webkit-appearance: push-button;
  -moz-appearance: button; 
  display: inline-block;
  margin: 60px 0 10px 0;
  cursor: pointer;
}

/* Default State */
.facebook {
   background: green;
   width: 400px;
   height: 100px;
   line-height: 100px;
   color: white;
   text-align: center;
}

/* Toggled State */
input[type=checkbox]:checked ~ .facebook {
   display: none;
}

fiddle Here And more About this csstricks

Css: Is a Hidden Object Clickable