Stop anchor links from overflowing and being activated

I am facing a situation where I have an anchor element with a child element (img) that is larger than the anchor element itself. My goal is to restrict the 'clickable' area of the anchor links only to the anchor element.

<div>
  <a href="">
    <img src="somewhere/images/this.svg" />
  </a>
</div>

For a visual representation and code example, you can check out this codepen showing the clickable area extending beyond the anchor element.

If possible, I would prefer not to separate these elements into sibling elements.

htmlcsssvg

Answer №1

This possibility is not immediately apparent.

The issue arises from the anchor element acting as the parent, causing any clicks on its children to trigger a click event on the anchor. To address this, you can prevent click events on the child svg element by utilizing the technique mentioned in the following link: disable click events. By applying this method, only the anchor element remains clickable.

Modified Example

a.yellow-clickable > svg {
  pointer-events: none;
}

In almost any alternative scenario, resolving the issue would be quite straightforward. Simply include overflow: hidden in the anchor element's CSS.

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

Removing an unnamed cookie

A mysterious cookie mysteriously appeared on my website, courtesy of Sharethis (value "sharethis_cookie_test"). This cookie is causing all sorts of session issues for me specifically on Chrome. Despite removing the sharethis plugin from my site, this pesky ...

javascripthtmlgoogle-chromecookiessharethis

Displaying all hidden sections on a website

I'm trying to figure out if there's a way to expand all the collapsible sections on a webpage at once. One section that is relevant to my search looks like this: <tr> <td></td> <td style="..;"> <div s ...

javascriptcsshtml

jquery has a strange behavior where the dialog window will cover up the scrollbar when the main

Currently, I am utilizing jQuery dialog to display a dialog window. I have managed to position it at the bottom left corner as desired. However, when the main window contains a scrollbar, the dialog ends up overlapping with the scrollbar instead of alignin ...

javascriptjquerycssjquery-uijquery-ui-dialog

The Spotify List items generated from stored localStorage information are showing as empty

I'm currently developing an app for Spotify and I am facing some challenges while trying to create a views.List object using data stored in our database. Initially, I make a POST request to retrieve the required information and store it in local stora ...

htmllocal-storagespotify

What could be the reason for the absence of an option in the navbar

As I work on creating a navbar menu that functions as an accordion on desktop and mobile, I encountered an issue. When I click on the dropdown on mobile, it displays one less item than intended. This seems to be related to a design error where the first it ...

javascripthtmlcssuinavigationbar

Tips for applying a linear gradient mask to div elements?

I'm attempting to create a fading effect on the edges of a div by using two overlay divs positioned absolutely on either side. My goal is to have the background of the page visible once the fade is complete, effectively masking the content of one div ...

htmlcssmasking

Receiving a 200 ok status, but encountering a response error in Postman

Receiving a response with a 200 OK status, but encountering an error message in Postman. { "errors": "Unable to log you in, please try again.", "success": false } Post Url: [{"key":"Content-Type","value":"application/json","descript ...

javascriptpythonhtmlajaxdjango

Can a border-bottom be made the same size as a class it is not linked to in CSS?

Can I set a border-bottom to match the size of a separate class? For example, I want a border-bottom at the bottom of each <section> tag. However, since the sections span the full width of the screen, the border-bottom inherits that width. Each < ...

htmlcsssassbootstrap-4

Achieve full height Bootstrap styling by nesting it inside a row div

Is there a way to make the height of the left sidebar div equal to 100% within a row, based on the height of the right content? I have tried setting the height to 100%, but it doesn't seem to work. Any advice would be appreciated. <body> < ...

htmlcsstwitter-bootstrap

Contrasts in Bootstrap 5.3 color schemes between development and live environments

Currently in the process of building a website using Astro [^2.2.1], Bootstrap [5.3.0-alpha3], and Svelte [^3.58.0]. Most components are functioning correctly, except for some elements like buttons where the foreground and background colors seem off. I&apo ...

csssassbootstrap-5astrojs

Using Flexbox for Input Elements Causes Additional Margins in Webkit Browser

My form has a straightforward layout with an email field and a submit button. I am using a flexbox design for this form, which is working well overall. However, I have noticed that there seems to be some extra spacing added next to input elements in webkit ...

csshtmlgoogle-chromeflexbox

Display Django radio buttons in a formatted list using the mark_safe() function

Exploring the Issue In an effort to include HTML instructions and display bullet points in my form label, I utilized 'mark_safe()' within a form: class FormFood(forms.Form): CHOICES = [ (1,'Yes'), (2, 'No')] response ...

pythonhtmldjangopython-3.xdjango-forms

The local Search engine code is not functioning properly

The software codes at (https:// jsfiddle . net /a0t376hy/) seem to be causing issues with local search functionalities. Despite multiple attempts to install the codes correctly, it is still not working. What could be the reason behind this problem? ...

htmlcsslocal

Exploring IP geolocation integration within Rails 3

I am looking to add a dynamic feature to my homepage that will display the location object closest to the reader's physical location. Currently, I have a Location model with longitude and latitude fields. My goal is to retrieve the location model obj ...

javascriptajaxruby-on-rails-3htmlgeolocation

How do I prevent a media query written for small screens from also affecting large screens?

@media only screen and (min-width: 320px), (min-width: 360px), (min-width: 375px), (min-width: 600px){ CSS properties for various screen widths are defined here } ...

cssmedia-queries

Having difficulty reaching elements within a shadow frame using Selenium in Java

I am encountering an issue while trying to access an element within a shadow iframe. I am able to switch to the frame successfully, but when attempting to access elements inside it, I am getting a Stale Element Exception. Any assistance with this would be ...

javascriptjavahtmlcssselenium

Create a dynamic animation using Angular to smoothly move a div element across the

I currently have a div with the following content: <div ng-style="{'left': PageMap.ColumnWrap.OverviewPanelLeft + 'px'}"></div> Whenever I press the right key, an event is triggered to change the PageMap.ColumnWrap.Overvie ...

javascripthtmlcssangularjs

Obtaining User Input in React JS within the Fetch Statement

I've written a code to fetch weather data from an API. Currently, the location is set to "chennai" in the link provided. I'd like to make this location user-dependent. How can I achieve this using React? import React,{useState,useEffect} from ...

htmlreactjsapi

What is the best way to showcase key-based values extracted from a text document?

I'm currently working on a file upload process that allows the user to display values based on a specific key, such as First Name. Below is a sample text: First Name : Joe Last Name : Smith Age : 21 My question is, how can I only display the values ...

javascripthtml

Is it possible to reroute using an ESP8266 captive portal?

I'm having trouble creating an html form in an esp8266 captive portal. It seems like the escape characters are causing issues. I've exhausted all possible options I could find. I've been using the backslash (\) to escape and even attem ...

htmlesp8266arduino-ide