Turn an entire div into a clickable element with a functional :active CSS rule that is compatible with IE10

I am currently working on designing a clickable panel for an html app that will include multiple text elements and images.

Based on my understanding, this is typically achieved using a div. An example of this would be:

<div class="myButton">
    <h2>Text</h2>
    <h3>Some more text</h3>
    <img ...>
</div>

After adding some styling and setting up the click event, everything seems to be functioning well. However, I am encountering issues with styling the active state:

.myButton {
    cursor:pointer;
}
    .myButton:active{
        -ms-transition-duration: 0.2s;
        -ms-transform: scale(0.95);
    }

In this instance, I am attempting to create a CSS animation (specifically for IE), but it could really be anything. The problem lies in the fact that the active state only triggers when clicking directly on the div, not on any of its child elements.

You can view a demonstration of this scenario on JS Fiddle:

http://jsfiddle.net/S9JrH/13/

UPDATE: A big thank you to David Thomas for spotting a typo in the code and confirming that it works in Chrome.

Unfortunately, with IE10, the active state only registers when clicking on the lower part of the div, away from the text.

If anyone has insights on how to resolve this issue and make it function properly in IE10, please share your knowledge.

Answer №1

Currently not feasible (in my opinion)

As far as I can tell, this feature is currently not feasible because the `:active` state of a child element does not propagate up to the parent `div`. Both Internet Explorer 10 and Opera 11.64 were unable to pass the `:active` state up to the parent when testing with `div` elements.

Code snippet for demonstration: http://jsfiddle.net/jonathansampson/UrN39/

Alternative solution

The only workaround that comes to mind is using event propagation in JavaScript. Thankfully, mouse events like `mousedown` will bubble up through the DOM hierarchy, including reaching the parent `div`. The following example uses jQuery:

$(".myButton").on("mousedown mouseup mouseleave", function(e){
    $(this).toggleClass( "active", e.type === "mousedown" );
});

Note that here I have replaced the `:active` pseudo-class with an actual class `.active`. This method has been tested in IE10 and found to be effective. With this approach, it should work smoothly across most major browsers.

Fiddle for reference: http://jsfiddle.net/jonathansampson/S9JrH/8/

Answer №2

Have you considered utilizing the HTML <button> element for this purpose? It is specifically designed for situations like yours, as a button can receive focus unlike a div element.

Answer №3

If you want to ignore mouse events on a specific child element, simply apply the CSS property pointer-events: none;. This will ensure that the events are not triggered on the child and will instead be passed up to its parent element.

Answer №4

To prevent children from being clickable, I use the :after pseudo-element to overlay the element.

.myButton:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    opacity: 0;
    filter: alpha(opacity=0);
} 

Answer №5

.myButton:hover, .myButton *:hover{
  -webkit-transition-duration: 0.3s;
  -webkit-transform: scale(0.90);
}

Admittedly, I'm not entirely sure if the *:pseudo-selector is supported in Internet Explorer, but it works in Chrome so it might be worth experimenting with.

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

Looking to showcase your logo prominently at the center of the page, flanked by two elegant

Is it possible to create a grid-like structure with dimensions 5.5-1-5.5? I would like to center a logo on the page with two lines on the left and right. (Please excuse my limited English skills) https://i.sstatic.net/cgjfS.png ...

Expanding the size of one div causes the surrounding divs to shift positions

I am currently working on creating a row of divs that expand when hovered over by the mouse. I have managed to achieve this functionality, but now I want the expanding div to cover its neighboring divs partially, without affecting their sizes or moving the ...

`json object allows for category selection in options`

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 ...

Angular directive button failing to trigger ng-click event

Recently, I started working with Angular and ran into an issue while trying to set up a custom directive. The purpose of this directive is to display a button upon hovering over it, which, when clicked, should trigger a function within the directive. The b ...

JQuery Mobile header style vanishing when applied to a page generated dynamically

My second page retrieves data from an Ajax call on the home page, but the header lacks JQuery styling and I suspect a connection between the two. Here is the HTML for the dynamically generated page: <div data-role="page" id="breakdownDialog" data-add-b ...

Tips for adjusting the height of both an iframe and a div to fit perfectly at 100% combined

Struggling to make an iframe and div both have 100% full height on the page? I need a footer menu with 280px height, leaving the rest of the page for the iframe. After extensive research, it seems like jQuery might be necessary as CSS Flex didn't wor ...

Apply a style to the div element that contains a TextInput component

As a beginner in the world of React and Material UI, I am currently working with Material UI version "1.0.0-beta.17", React 15.6.2, styled-components 2.0.0, and styled-components-breakpoint 1.0.1. Within a div element, I have two TextInput fields. const ...

What is the best way to assign a JavaScript return value to a PHP variable?

Is it possible to capture the return value of a JavaScript function that checks if text boxes are empty and assign it to a PHP variable? I have successfully created a JavaScript function that returns false if any of the text boxes are empty, but now I ne ...

Tips on how to achieve a 50% width within a bootstrap input group

Need help setting the width of a select tag <div class="input-group"> <select class="form-select" style="width: 50%;"> <option selected value="dummy">Dummy</option> <opt ...

Highest Positioned jQuery Mobile Section

Requesting something a bit out of the ordinary, I understand. I currently have a jQueryMobile page set up with simplicity: <div data-role="page" class="type-home" id="home"> <div data-role="header" data-theme="b"> <h1>Our To ...

Creating a secured page with Node.js and Express: Password Protection

I am a beginner with node.js/express! Currently, I am working on developing a chat site along with a chat admin site. When I navigate to _____:3000/admin, it prompts me for a password through a form. I am looking for a way to verify if the entered passwor ...

Show two <p>'s next to each other

I am trying to arrange 2 paragraphs side by side. <p class = "firstClass">This is the first paragraph.</p> <p class = "secondClass">This is the second paragraph.</p> Result: This is the first paragraph. This is the second paragra ...

I am encountering an issue where my codeigniter controller is unable to load my model

Below is the code for my controller: defined('BASEPATH') OR exit('No direct script access allowed'); class Welcome extends CI_Controller { function __construct() { parent::__construct(); $this->load->model('User_model') ...

Struggling to dynamically create an identifier and data-bs-target, but experiencing difficulty in doing so

<ul> <li data-info="Amount in (₹)">{{depositeAmt}}</li> <li data-info="Status"> <button class="statusbtn Process" data-bs-toggle="collapse" data-bs-target="#colla ...

Tips for enlarging an image by tapping on it in handlebars

I currently have the handlebars template engine integrated with node.js, and I'm facing an issue where thumbnail images from the database are displaying at a fixed width and height of 70. Is there a way to enable users to click on these images in orde ...

Move the footer to the bottom of the content

I'm struggling to position my footer directly after the last div on my page, as it's appearing lower than I'd like. Can anyone assist with this issue? Here is the code snippet: <div id="container"> <div id="header"> ...

The malfunctioning buttons are a result of embedding PHP code within a JavaScript if-query

I am experiencing an issue where my buttons are not functioning properly, preventing me from clicking on them. All variables have been correctly assigned values. Can someone assist me in resolving this? Thank you. ?> <script> ...

The proper way of aligning text in the middle of a button

I'm currently working on designing a CSS button that will be placed in the top left corner and serve as a back button to the previous page. However, I am facing challenges when it comes to centering the arrow or text perfectly in the middle of the but ...

Create numerous collapsible elements using the ui.bootstrap and AngularJS frameworks

Currently, I am working on implementing the ui bootstrap collapse feature. The static single or double collapse system works perfectly fine, but for my specific design requirements, I need to create collapses using ng-repeat. Unfortunately, I am unsure how ...

CSS drop down menu malfunctioning

Trying my hand at anchor tags and drop down menu. I'm encountering an issue in the code below - the dropdown doesn't seem to be working as intended. It should display the text "This is dropdown menu" directly beneath the text "This is text. Its i ...