What are the steps to make a div with no content inside?

Question

What are the steps to make a div with no content inside?

Presently, I am dealing with 2 overlapping transparent div's each containing unique buttons and functionalities in the following manner:

.item1{
  height:10rem;
  width:10rem;
  position:absolute;
  border:0.5rem solid red;
  background-color:transparent;
}

.item2{
  height:10rem;
  width:10rem;
  position:absolute;
  top:5rem;
  left:2rem;
  border:0.5rem solid blue;
  background-color:transparent;
}

<div class="item2">
  <button>button 2</button>
</div>

<div class="item1">
  <button>button 1</button>
</div>

However, I am seeking a way for these divs to behave as hollow so that even if they overlap, such as in the example above, it is possible to click on button2. Is this scenario achievable?

Note:
I am not interested in utilizing any alternative solutions like SVG rectangles instead.

javascript html css

Answer 1

Answer №1

Restricting pointer events to the button element

.element1{
  height:10rem;
  width:10rem;
  position:absolute;
  border:0.5rem solid red;
  background-color:transparent;
}

.element2{
  height:10rem;
  width:10rem;
  position:absolute;
  top:5rem;
  left:2rem;
  border:0.5rem solid blue;
  background-color:transparent;
}

div[class] {
  pointer-events: none;
}
button {
  pointer-events: initial;
}

<div class="element2">
  <button>button 2</button>
</div>

<div class="element1">
  <button>button 1</button>
</div>

Answer 2

Restricting pointer events to the button element

.element1{
  height:10rem;
  width:10rem;
  position:absolute;
  border:0.5rem solid red;
  background-color:transparent;
}

.element2{
  height:10rem;
  width:10rem;
  position:absolute;
  top:5rem;
  left:2rem;
  border:0.5rem solid blue;
  background-color:transparent;
}

div[class] {
  pointer-events: none;
}
button {
  pointer-events: initial;
}

<div class="element2">
  <button>button 2</button>
</div>

<div class="element1">
  <button>button 1</button>
</div>

What are the steps to make a div with no content inside?

Answer №1

Similar questions

Utilizing AngularJS routes to load a specific URL when accessing a page for the first time

Waiting for Angular's For loop to complete

What is the best way to determine the final letter of a column in a Google Sheet, starting from the first letter and using a set of

Removing dropdown lists from input forms can be achieved without using jQuery by utilizing vanilla JavaScript

How can ReactJS continuously dispatch promises after a set interval?

Can you explain the significance of argument[0] in JavascriptExecutor?

Utilizing JSTL: Executing a function within <script> through the c:set tag in JSTL

Utilize the v-if directive with nested object properties for dynamic conditional rendering

Calculating the total number of clicks on a button using PHP

Instructions for retrieving data from a weather API using JavaScript

Unable to add JSON data to Javascript List Object? Consider using a combination of Node.JS and Firebase for a

What is the best way to check if a user input matches any of the items saved in an array?

The promise is coming back as undefined

Display React component when clicked

JavaScript nested function that returns the ID of the first div element only upon being clicked

How do I incorporate a standalone checkbox in a React Material-UI table without affecting row selection upon clicking?

The compatibility between V-model and TinyMCE is unreliable

External Submit button malfunctioning when attempting to submit two distinct forms

Error: The property '...' is not found in the ReactElement<any, any> type, but it is required in the type '{...}'

Heroku experiences unexpected surge in memory consumption while using Puppeteer