What is the best way to deactivate a hyperlink of an <a> tag specifically for a particular child within an element?

Imagine you have a clickable container that leads to another page when clicked. However, there are elements within this container that you want to disable so that clicking on them does not activate the link. How can this be achieved?

For instance, in this scenario, I aim to deactivate the red portion of the container. 

a {
  text-decoration: none;
  color: white;
}

.container {
  display: flex;
  width: 400px;
  height: 100px;
  background-color: #ddd;
  box-sizing: border-box;
  padding: 5px;
}

.block-1 {
  width: 50%;
  height: 100%;
  background-color: #3e3e3e;
  text-align: center;
  box-sizing: border-box;
  padding-top: 20px;
}

.block-2 {
  width: 50%;
  height: 100%;
  background-color: red;
  text-align: center;
  box-sizing: border-box;
  padding-top: 20px;
}
<a href="#">
  <div class="container">
    <div class="block-1">Active</div>
    <div class="block-2">Disabled</div>
  </div>
</a>

htmlcss

Answer №1

When you place content within an <a> tag, it becomes clickable since the "click" event is triggered on the parent (<a> tag) rather than its contents.

To address this issue, ensure that one div functions as a link while the other does not.

a {
  text-decoration: none;
  color: white;
}

.container {
  display: flex;
  width: 400px;
  height: 100px;
  background-color: #ddd;
  box-sizing: border-box;
  padding: 5px;
}

.block-1 {
  width: 50%;
  height: 100%;
  background-color: #3e3e3e;
  text-align: center;
  box-sizing: border-box;
  padding-top: 20px;
}

.block-2 {
  width: 50%;
  height: 100%;
  background-color: red;
  text-align: center;
  box-sizing: border-box;
  padding-top: 20px;
}
<div class="container">
   <a href="#" class="block-1">Active</a>
   <div class="block-2">Disabled</div>
</div>

Answer №2

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Link Disabling via CSS</title> 
    <style type="text/css"> 
        .not-active { 
            pointer-events: none; 
            cursor: default; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;">UniqueCodingSpace</h1> 
        <h3>A Programming Hub for Innovators</h3> 
        <b>Disabled link:</b> Want to explore more?  
          <a href="www.uniquecodingspace.com"
             class="not-active">Click Here</a> 
        <br> 
        <br> 
        <b>Enabled link:</b> Access our coding platform  
          <a href= 
             "https://platform.uniquecodingspace.com/tryit.php"> 
            Click Here</a> 
    </center> 
</body> 
  
</html>

Answer №3

If you want to control whether a link is followed or not, one approach is to implement a click handler. You can use this post as a reference on how to achieve this by using e.preventDefault().

In the code snippet below, manipulation of the disabled variable can enable or disable the link.

It's worth noting that while this method may not be optimal for accessibility and screen readers, adding attributes such as aria-disabled could potentially improve the user experience in this regard.

var link = document.querySelector('a');
var disabled = true;
link.addEventListener('click', (e) => {
  if (disabled) {
    console.log('disabled');
    e.preventDefault();
  }
});
<a href="https://google.com">My link</a>

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

How can I modify the color of a div when a validation error occurs?

I have recently completed a contact form with validation using the constraint validation api. Although the files are functioning as intended, I am curious if there is a method to make the error boxes turn red when an error occurs and white (or hidden) when ...

javascripthtmlcss

Can applications on Windows 8 operate using JavaScript, HTML5, and CSS3 that adhere to industry standards?

As a .NET developer, I tuned in to the keynote for the Build Event in Anaheim, California and had some questions regarding the new support for creating Windows 8 applications using JavaScript, HTML5, and CSS3. They showcased several examples and mentioned ...

javascripthtmlcsscross-platformwindows-8

Clicking the ASP button does not trigger the onclick event when a web user control is included on the webpage

I have been working on a web form application that I developed using the visual studio template. The template includes a content placeholder that gets replaced by the content of each accessed page. One particular page, which contains server controls like t ...

javascriptc#htmlasp.netweb-controls

How to retrieve the dimensions of an image for a specified CSS class with Selenium or PIL in Python

I am interested in using Python to determine the size of specific images. Is it possible to automate this process so that I can identify only images with certain classes? I am unfamiliar with PIL. Could I define the CSS class/name/id after specifying the U ...

pythonhtmlcssselenium

Tips for adjusting the height and border of Bootstrap tabs

I'm facing an issue with the modal and nav-tabs I created. There are a couple of problems that need to be addressed. Firstly, the tabs have excessive height and I've tried adjusting it using CSS height property, but it's not working as e ...

jqueryhtmlcsstwitter-bootstrap

How to Use Laravel to Create HTML Divs Without Images

While working with a text editor, we have the ability to incorporate various HTML tags such as images and videos. However, I am only interested in displaying text fields. When I use {{$loop->content}}, it displays: <p><strong>EXAMPLE</st ...

htmlcsslaravellaravel-5

What is causing the z-index to not function properly on my elements?

In my current code setup, I have positioned the hero image at the bottom with an overlay on top that contains text and a button. Additionally, there is a navigation bar with a z-index applied. However, I am facing an issue where the button for viewing my r ...

htmlcssz-index

Creating your own personalized menu in PHP

Although I am relatively new to PHP, I have successfully developed a membership framework for my website that is fully functional. However, before diving into the design phase, there is one particular thing I am keen on achieving but unsure of how to go ab ...

phphtmlmenuhyperlink

Connecting to particular sections on other pages

My website setup includes a page titled "news.html" that contains an iframe with fixed size. The iframe is linked to "innernews.html", which is the actual content to be displayed. I structured it this way for consistent page sizing, as the iframe prevents ...

html

What is the best way to use two distinct CSS styles for mat-form-field across multiple pages?

On one of my pages, I have a mat-form-field: <mat-form-field class="form-control-full-width"> <input type="text" matInput placeholder="First Name" formControlName="firstNameFC" required> <mat-error *ngIf="hasNewUserErro ...

htmlcssangularangular-materialmat-form-field

Navigating to different HTML pages by utilizing <a> elements in Angular 2

As a newcomer to Angular 2, I've decided to build my personal website using this framework. The main page of my website contains bio information, while the other page will feature blog content. Both pages will have a shared header and footer, but diff ...

htmlangulartypescriptangular2-routingangular2-template

Show a div pulsating while simultaneously animating another div

After coming across this query on Stack Overflow about adding a class without jQuery if hovering over another class I encountered an issue with a div element that displays upon hovering over a span, which was functioning correctly. However, I also have a ...

htmlcss

The remaining visible portion of a viewport is equivalent to the height of an element

Is there a way to dynamically set a div's height so that it expands from its starting position to the end of its parent div, which is 100% of the viewport minus 20 pixels? Here is an example of how you can achieve this using jQuery: $(document).read ...

javascriptjqueryhtmlcss

A helpful tip for dynamically adjusting the canvas size is to utilize its height and width attributes to resize it whenever it undergoes a change

I am encountering an issue with the canvas element in my code. The canvas is supposed to update whenever its containing div is resized. window.addEventListener('resize',function() { let mapwidth = $('.canvas').attr("width") l ...

javascripthtmljquerycsscanvas

the slider HTML control is missing a value

Exploring the Range Input Type in HTML When adjusting the value on a slider (Range input type), that value is displayed in a textbox. However, making the same adjustment in the textbox does not update the slider's value. Below is the code snippet: & ...

javascripthtml

What is the maximum number of files that FileUploader can accept when multi-select is enabled?

I encountered the following issue: A first chance exception of type 'System.Web.HttpException' occurred in System.Web.dll Additional information: Maximum request length exceeded. while attempting to upload 250 JPEG files, each around 98 KB in ...

c#asp.nethtml

Initiate an animation in Wordpress once the entire page has finished loading

Recently, I incorporated some "raw html" elements with animations into my WordPress site. However, the issue I'm facing is that these animations kick off as soon as the page loads, without waiting for the preloader to complete and display the actual c ...

javascriptcsswordpressanimation

Ways to reduce the size of the border on the bottom in HTML/CSS

Currently, I am working with a div container (utilizing bootstrap.min.css) that contains another class called divborder. The length of the border-bottom in divborder is quite long and I'm wondering how I can adjust it to be shorter. Below is a snippe ...

htmlcss

Align the text in the center of the button vertically

Struggling to vertically center text on a button? I understand the frustration! I've been working on this issue for a whole day with no success. My setup involves NEXT.js and TailwindCSS. <main> <div class='flex justify-center ite ...

cssreactjsnext.jstailwind-csscentering

Organize the Div elements in the form of a message

Here is the code I am working with: https://jsfiddle.net/bdqgszv5/1/ This is the same code without jsfiddle: <section id="aussteller" class="row separated"> <div class="section-header text-center"> <h2& ...

htmlcsstwitter-bootstrap