I'm rebuilding some webpages (using only html/css/jquery/js), and one of them has a series of products on it. Each one is contained in their own div, and repeated over the page multiple times. the products all have an image, some text, and a link.
I'm attempting to change the the product slides so that the entire element is clickable. normally no big thing, as i could just wrap the sucker in an tag and be done with it.
However, there is a link on the on the product slide. and the CSS theme being used selects based on both class names and element type, so if i change either the stylings will simply fall off.
I built a rough example of the structure in a codepen:
<div id="description">text text text</div>
<a class="inner-link">buy now!</a>
If you don't mind not having the content selectable inside your element, you could make an overlay that sits over top of the content that is itself an anchor. Position the parent as
position: relative; and the child
<a> overlay as
position: absolute; top:0; bottom: 0; left: 0; right: 0;.
Just make sure the overlay is a sibling, not a parent, to your
.inner-link anchor and that it comes before it.