CSS Pointer Events Generator

Full Example

/* CSS Pointer Events Examples */

/* Basic pointer-events values */
.clickable {
  pointer-events: auto;  /* Default - element reacts to pointer events */
}

.click-through {
  pointer-events: none;  /* Element ignores pointer events */
}

/* Overlay that allows clicks to pass through */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;  /* Clicks pass through */
}

.modal-overlay .modal-content {
  pointer-events: auto;  /* But modal content is clickable */
}

/* Disabled button state */
button:disabled,
.btn--disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

/* Loading state */
.loading {
  position: relative;
  pointer-events: none;
}

.loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}

/* Watermark that doesn't interfere with content */
.watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  color: rgba(0, 0, 0, 0.1);
  pointer-events: none;
  user-select: none;
}

/* Decorative elements */
.decoration,
.background-pattern,
.visual-effect {
  pointer-events: none;
}

/* Tooltip that follows cursor */
.tooltip {
  position: fixed;
  pointer-events: none;  /* Prevents flickering */
  z-index: 1000;
}

/* Custom cursor element */
.custom-cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

/* Image caption overlay */
.image-container {
  position: relative;
}

.image-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  color: white;
  pointer-events: none;  /* Allow clicking image underneath */
}

.image-caption a {
  pointer-events: auto;  /* But links within are clickable */
}

/* Interactive SVG patterns */
svg.interactive {
  pointer-events: visiblePainted;
}

svg.interactive path {
  pointer-events: fill;
  cursor: pointer;
}

svg.interactive path:hover {
  fill: #007bff;
}

/* SVG with stroke interaction only */
svg.stroke-interactive path {
  pointer-events: stroke;
  stroke-width: 3px;
  fill: transparent;
}

/* Map markers */
.map-container {
  position: relative;
}

.map-marker {
  pointer-events: auto;
  cursor: pointer;
}

.map-label {
  pointer-events: none;  /* Labels don't block marker clicks */
}

/* Conditional interaction based on state */
.card {
  pointer-events: auto;
}

.card[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.6;
}

/* Toggle interaction via class */
.no-interaction {
  pointer-events: none;
}

.has-interaction {
  pointer-events: auto;
}

/* Form validation overlays */
.input-wrapper.invalid::after {
  content: '!';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: red;
  pointer-events: none;
}

/* Drag handle that doesn't trigger child events */
.drag-handle {
  pointer-events: auto;
}

.drag-handle * {
  pointer-events: none;
}

/* Hover to enable pattern */
.parent {
  pointer-events: none;
}

.parent:hover {
  pointer-events: auto;
}

/* Focus-within to enable */
.dropdown {
  pointer-events: none;
}

.dropdown-wrapper:focus-within .dropdown {
  pointer-events: auto;
}

/* Animation timing with pointer events */
.fade-in {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.fade-in.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Prevent double-clicks */
.btn--processing {
  pointer-events: none;
}

/* Responsive pointer events */
@media (hover: none) {
  /* Touch devices */
  .hover-only {
    pointer-events: none;
  }
}

@media (hover: hover) {
  /* Devices with hover */
  .touch-only {
    pointer-events: none;
  }
}

/* Print styles */
@media print {
  * {
    pointer-events: none !important;
  }
}

/* Accessibility considerations */
.visually-hidden-interactive {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  pointer-events: auto;  /* Still interactive for screen readers */
}

/* Skip link that becomes visible on focus */
.skip-link {
  position: absolute;
  top: -100px;
  pointer-events: none;
}

.skip-link:focus {
  top: 0;
  pointer-events: auto;
}