In my design, I have a parent element with a slightly see-through background. Inside this parent element, there is a child element. To display the child element behind the parent element, I gave it a z-index of -1.
For reference, here is an example on CodePen: https://codepen.io/anon/pen/xpVbPa
The gray square represents the child element. I need to make it clickable. How can this be achieved? I attempted to use pointer events: none on the parent element, but it was not successful.
Implement a pseudo element with a background image and include pointer-events: none.
function childClick() {
alert('click!');
}.parent {
width: 200px;
height: 200px;
border: 1px solid black;
padding: 50px;
position: relative;
}
.parent:after {
content: '';
background: url(https://image.ibb.co/fAYr5R/585e4ad1cb11b227491c3391.png);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
pointer-events: none;
}
.child {
width: 150px;
height: 150px;
background-color: gray;
cursor: pointer;
position: absolute;
}<div class="parent">
<div class="child" onclick="childClick()"></div>
</div>An effective strategy for solving this particular issue involves focusing not on the parent of .child, but rather on a sibling element:
function childClick() {
alert('click!');
}.parent {
position:relative;
}
.frontground {
width: 200px;
height: 200px;
border: 1px solid black;
padding: 50px;
pointer-events: none;
position: relative;
background: url(https://image.ibb.co/fAYr5R/585e4ad1cb11b227491c3391.png)
}
.child {
width: 150px;
height: 150px;
background-color: gray;
cursor: pointer;
position: absolute;
margin: 50px;
}<div class="parent">
<div class="child" onclick="childClick()"></div>
<div class="frontground"></div>
</div>In certain scenarios, the sibling can potentially be a pseudo-element, although this may not always be feasible.
Revamp your CSS by adding background to the child's div :after selector.
.child:after{
width: 150px;
height: 150px;
background-color: gray;
position: absolute;
cursor: pointer;
content:"";
z-index: -1;
}
.child {
width: 150px;
height: 150px;
}
As I work on designing a landing page using TailwindCSS, I’m looking to add a decorative element under my headlines. To accomplish this, I decided to create an SVG and utilize the after pseudo-element to position it accordingly. Here’s a snippet of my ...
I'm currently working with the PrimeVue Dialog component. My goal now is to apply different styles depending on whether the dialog is maximized or not. Let's keep it simple by saying I want to change the text to bold or red when the dialog is max ...
Here's a fiddle link: http://jsfiddle.net/rh74h/ The checkboxes are listed below: <div ID="campaignDiv" runat="server"> <ul> <li> <span class="textDropdown">Text1</span> <input type="checkbox" id ...
I am currently working on creating a functionality similar to the 'Sortable Widget', but due to some constraints, I cannot use the premade widget. Instead, I am trying to replicate its features using draggable and droppable elements: $(".Element ...
I'm looking to extract all the strings from the Assignes array, which is a property of the Atm object, and populate dynamic input fields with each string. Users should be able to update or delete these strings individually. What approach can I take us ...
Check out my GitHub page at You can also view the repository here: https://github.com/chryspenalber/hercules I'm encountering an issue where the images inserted through CSS are not showing up on the GitHub page, although they display fine on localho ...
Is there a way to add some space between the top of my webpage and my logo? I've tried adjusting the padding in my CSS, but when I check the print preview in Chrome, no spacing is visible. Below is my HTML code: <div class="container"> < ...
I am attempting to incorporate my css file into Shiny R. I have been able to run the application without any issues before adding the style.css file. Below are the steps I have taken: library(shiny) library(tidyverse) library(leaflet) library(leaflet.extra ...
Arrange three columns with a fixed combined width. The center column will have dynamic content, while the left and right columns should fill out the remaining space equally. For example, see this demonstration: http://jsfiddle.net/htKje/ <div class="c ...
Currently working on implementing a horizontal card row for my website with a unique hover effect - the cards lightly rotate and raise on hover. Here is a preview: https://i.sstatic.net/eDQ59.gif To make this row responsive, I added overflow-x: auto; to e ...
If I understand correctly, I can utilize a query string and parse it to display certain information. How would I apply that concept to load a specific image? https://codepen.io/anon/pen/qYXexG <div id="gallery"> <div id="panel"> <img ...
My issue is that the collapsible menu I have created does not remain closed when the page is refreshed. Upon reloading the page, the collapsible menu is always fully expanded, even if it was collapsed before the refresh. This creates a problem as there is ...
Hello (please excuse my English), I have the following script: <script type="text/javascript"> $(document).ready(function() { var idPlato = decodeURI(getUrlVars()["idPl"]); var url = "http://localhost/plato-datos.php?idPla="+idPl ...
var brand = "Glare"; var price = "3000$"; var color = "blue"; var success = tx.executeSql("INSERT INTO truck (brand, price, color) VALUES ('"+brand+"','"+price+"','"+color+"' ")"); if(success) { alert("successfully insert ...
I'm having trouble adding options to a dropdown field when dynamically adding rows through jQuery. Everything else is working fine with the addition and deletion of rows, but the dropdown field options are not appearing. Can anyone help? I've tri ...
Utilizing css counters for the formatting of certain wiki pages is a common practice that I implement by adding CSS directly to the wiki page. One particular use case involves numbering headers using counters. Below is a snippet of the code that demonstra ...
I am facing a situation and require assistance (related to HTML/CSS/JS) I currently have a div containing an image (occupying the entire div space) such that when hovered over, another div with an image is displayed on top (the second div is semi-transpar ...
I've been working with an object data that looks like this: object = { "2020092020-08-01":{ "value":"123", "id_number":"202009" }, "2020092020-09-01":{ "value& ...
I am having trouble displaying all the published pages within my WordPress site as a dropdown list. Here is the code I have attempted to use: <div class="header-right"> <?php $pages = get_pages(); $posts = get_pages(array( ...
As someone who is new to HTML and web development, please excuse me if this is a simple issue. I have been using QuickChart.io to generate an image through API calls. In my Django application, I've set up a custom URL to call QuickChart in my view fil ...