Making an onclick area behave like a link

For it to behave like below?

<div class="box">
  <a href="#">do something else</a>
  <a class="show-detail" href="#">show detail</a>
</div>

HTML:

.box{
  position: relative;
}
.box .show-detail{
  position: absolute;
  bottom: 0;
  width: 100%;
}

Code (CSS):

 

My advice, rip out the JavaScript -- ALL of it. ESPECIALLY if you've got a "click anywhere on the page" intercept since you're basically making users bounce the moment they see it do that -- or diving for script blocking tools like noScript, ScriptSafe, Ghostery, etc, etc...

In general intercepting clicks with JavaScript is accessibility trash and should be avoided -- it's the province of two bit sleaze on porn sites desperate for advertising revenue, NOT working on legitimate site designs.

 

In which case it should be intercepting the default behavior of the anchor -- which is NOT what it sounds like she's doing.

Since if it was the natural behavior of an anchor, it would already be there on the context menu.

As the unwritten rule of JavaScript goes:

Which is why my question is "If this has a link type opening a page behavior, why isn't it an <a>?!?" WHY are you even getting JavaScript involved?

@hdewantara was closest to correct, using your little fiddle as an example (Chrismas on a cracker how the *** do people use / put up with that damned site? Oh wait, I say the same thing about Git) and fixing the single quotes that illustrate someone doesn't know how to write server side code and the "what the **** makes an image or a sentence fragment link a paragraph?!?".

<div class="box">
	<a href="http://www.google.com" class="overlink">Go to google</a>
	<p>
		text line 1
	</p>
	<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/articles/health_tools/taking_care_of_kitten_slideshow/photolibrary_rm_photo_of_kitten_in_grass.jpg" width="250px">
	<br>
	<a href="/go.php">go here</a>
</div>

Code (markup):

The title attribute being an ATTEMPT at making up for the lack of content on the anchor.

.box {
	position:relative;
	 width:400px;
	border:1px solid red;
}

.box > * {
	position:relative; /* force code-order depth sorting */
}

.box .overlink {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	text-indent:-999em;
}

Code (markup):

getting the scripttardery the *** out of there.

Now, IF it were doing something like what @digitalpoint said, I'd STILL do it this way. The only difference is I would hook and intercept that anchor and cancel the event -- parsing the HREF to determine the action since the "data" would already be there... and when I say hook I mean from the scripting, remember we've been told for nearly a decade to STOP using onevent attributes since they're blocked under the CSP and should be removed from the HTML specification entirely!

But to be fair, I think IMG, AUDIO, VIDEO, and EMBED should be stricken from HTML for being redundant to OBJECT... which is what the real successor to HTML 4 Strict was SUPPOSED to do before the WhatWG had to go and piss on everything!

Hooking an already working anchor means it works scripting on OR off. Fancy modal dialogue when scripting is available? Sure. Fallback to a pageload when scripting off, that too!

JavaScript 101 people, don't use it when you don't have to, and when you do make sure it still lets the user do something scripting off.

 

So the whole thing's a walking talking WCAG violation? Way to make the site useful to users. JUST DETERMINED to sink themselves are they?