Can the element be partially covered while remaining exposed to the cursor?

In the design, I am looking to add overlay images to the menu while ensuring that the entire menu item is clickable, not just a portion of it.

Currently, only the top part of the button is clickable in the implementation found at 

.elem {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #777;
  transition: .3s;
}

.elem:hover {
  cursor: pointer;
  background: #f77;
}

.higher-box {
  position: relative;
  margin-top: -50px;
  width: 308px;
  height: 100px;
  background: rgba(0, 0, 255, .9);
  z-index: 1;
}
<div class="lower-box">
  <a href="#"><div class="elem"></div></a>
  <a href="#"><div class="elem"></div></a>
  <a href="#"><div class="elem"></div></a>
</div>
<div class="higher-box"></div>

Is there a way to make the gray blocks clickable in the overlapping area with the blue block?

htmlcssz-index

Answer №1

To disable the cursor actions for the element with the class higher-box, you can achieve this with the following CSS: 

.higher-box { pointer-events: none }

.elem {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #777;
  transition: .3s;
}

.elem:hover {
  cursor: pointer;
  background: #f77;
}

.higher-box {
  position: relative;
  margin-top: -50px;
  width: 308px;
  height: 100px;
  background: rgba(0, 0, 255, .9);
  z-index: 1;
  pointer-events: none;
}
<div class="lower-box">
  <a href="#"><div class="elem"></div></a>
  <a href="#"><div class="elem"></div></a>
  <a href="#"><div class="elem"></div></a>
</div>
<div class="higher-box"></div>

Answer №2

If there is no prior stacking context, you have the option to utilize a pseudoelement:

HTML

<div class="hidden"></div>
<div class="showing"></div>

CSS

.hidden{
  width: 150px; height: 150px;
  background: yellow;
  position: relative;
}
.hidden:hover{
  background-color: orange;
}

.showing{
  width: 150px; height: 150px;
  background: purple;
  position: relative;
  top: -50px;
}

.hidden:before{
  content: "";
  display: block;
  position: absolute;
  z-index: 200;
  width: 100%; height: 100%;
}

http://codepen.io/anon/pen/AbCdEf

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Determining with jQuery if the right element has been successfully "dropped"

Imagine having 10 different draggable boxes and 2 droppable areas. You need to correctly match 5 boxes with droppable area 1 and the other 5 with droppable area 2. If a box intended for droppable area 1 is mistakenly dropped into area 2, it should not wor ...

javascriptphpjqueryhtmljquery-ui

Creating immersive experiences with fabric.js in fullscreen mode on canvas

Attempting to implement a fullscreen mode (using HTML5 fullscreen) for a canvas object created with Fabric.js. var canvas = fabricCanvas.getSelectionElement(); if(canvas.requestFullScreen) { canvas.requestFullScreen(); } else if(canvas.webkitRequestFu ...

javascripthtmlcanvasfabricjs

Is there a method in CSS animations that allows for endlessly repeating successive animations in a specified sequence?

While working with CSS animations, I encountered a challenge of making two animations occur successively and repeat infinitely without merging keyframes. Is there a way to achieve this using only CSS? If not, how can I accomplish it using JavaScript? I a ...

javascripthtmlcsscss-animations

What is the best method for implementing a media query in an email generated from a backend system

I have integrated media queries into my backend (Node) email system to display different content based on whether the email is opened on a phone or desktop. Strangely, the media query works properly when the email is opened in a native app (like Yahoo&apos ...

cssnode.jsmedia-queries

When using position:sticky, the overflow:auto behavior may not function as intended

My Bootstrap table has the class "table-responsive," which automatically sets overflow-x to auto when the table is too wide for the screen. In addition, I've applied the class "sticky-top" to the th elements in order to make them sticky within the ta ...

htmlcssbootstrap-4

Maximizing the use of default top positioning for absolutely positioned elements

After observing that an element with position:absolute can have its default top value determined based on its immediate parent's position, regardless of whether it is set to relative or not, BoltClock explained that in such cases, it remains in a stat ...

csscss-position

In Javascript, when trying to call Firebase database child(), it may sometimes result in the return value being "

Here is the current setup: Firebase Database: setores: { -KkBgUmX6BEeVyrudlfK: { id: '-KkBgUmX6BEeVyrudlfK', nome: 'test' } -KkDYxfwka8YM6uFOWpH: { id: '-KkDYxfwka8YM6uFOWpH', nome ...

javascriptjqueryhtmlfirebasefirebase-realtime-database

Getting the checkbox count value in a treeview upon successful completion of an AJAX request

After successful JSON Ajax response, a treeview structure with checkboxes is displayed. I need to capture the number of checkboxes checked when the save button is clicked. @model MedeilMVC_CLOUD.Models.UserView <script type="text/javascript"> ...

javascriptjqueryhtmlcssajax

How can you retrieve script data within HTML and PHP tags?

I am currently working on a web application using CodeIgniter-3 and I have encountered an issue with a form that contains two dropdowns which are dependent on each other. When a selection is made in the first dropdown, the data in the second dropdown sho ...

javascriptphphtmlcodeignitercodeigniter-3

div with a fixed element inside that is scrollable

Check out this jsfiddle: http://jsfiddle.net/devboell/kjFps/ I am trying to create a div that overflows both horizontally and vertically. Additionally, I need an element that scrolls only horizontally while remaining fixed vertically. Here is an explanat ...

jquerycsshtmlpositioning

Guide to successfully navigating to a webpage using page.link when the link does not have an id, but is designated by a

This is my current code snippet: async function main(){ for(int=0;int<50;int++){ const allLinks = await getLinks(); //console.log(allLinks); const browser = await puppeteer.launch({ headless: true }); const page = await browser.newPa ...

javascripthtmlnode.jsasync-awaitpuppeteer

The XPath function $x() will always return an array, regardless of whether or not an index is specified

How can I target the div elements that have the class "month-table_col" (selecting by month). ... <div class="month-table"> <div class="month-table_row"> <div class="month-table_col">Jan ...

htmlcssxmlxpathweb-scraping

Configure the input to accept integer values

This page that I have developed is designed for entering Latitude and Longitude values. <div class="container "> <form class="entry"> <div class="aligncenter"> <h5 style="color:MediumTurquoise; font ...

javascriptjqueryhtmlcssjson

Steps to reverting CSS attributes back to their default values for a specified element (or blocking inheritance)

How can you reset a specific CSS attribute of an HTML element, which is automatically inheriting styles from its parent, to the default value? For example: CSS: .navigation input { padding: 0; margin: 0 30em; } HTML <div class="navigation"& ...

htmlcss

CSS3 problem with using transparent PNGs as border images

Currently, I am implementing the border-image property using a PNG image that contains a transparent section. The issue arises when the background-color of the div is set to black. Upon applying the border-radius, the transparent section of the pattern dis ...

htmlpngtransparencycss

Designing a layout with one box on top and two beneath it, covering the entire page, can be achieved by following these steps

https://i.sstatic.net/A1eUh.png I am currently working on a project where I want to divide the screen into three sections. One section will cover half of the screen to display an image slider, and the remaining half will have two sections which is already ...

javascriptjqueryhtmlcss

Is there a way for me to manually designate certain domains with the rel="follow" attribute while assigning all other external links with the rel="nofollow" attribute?

I'm working on developing a community platform similar to a social network. I've implemented a code that automatically makes all external links nofollow. However, I would like to create a feature that allows me to remove the nofollow attribute f ...

javascriptphphtmlcsssocial-networking

Calculating the percentage difference between two dates to accurately represent timeline chart bar data

I am in the process of creating a unique horizontal timeline chart that visually represents the time span of milestones based on their start and finish dates. Each bar on the timeline corresponds to a milestone, and each rectangle behind the bars signifies ...

javascriptcssreactjstypescriptdatetime

Utilizing JavaScript to add classes to a parent element

When a user clicks on a link, I want to add a class to the <li> tag that wraps around it. Here is an example: <ul> <li><a href="#">Just an Example</a></li> </ul> How can I target the <li> element enclosing ...

javascriptjqueryhtml

Navigation menu consist of two horizontal rows

I'm facing a challenge. I have a total of 8 links (one being a button) on a navigation menu that I need to display in two rows on the right side. I'm having difficulty aligning them properly while also justifying them to the right. Essentially, t ...

htmlbootstrap-4