CodePen Embed - Using jQuery to make a whole div (card) with nested links clickable while making sure the text stays selectable and a status bar is showing

<body>
	<main class="container">
		<section class="cards">
			<article class="card yellow">
				<div class="header">
					<h2>w3schools</h2>
				</div>
				<div class="body">
					<p>
						Sed lobortis gravida magna eget sollicitudin. Proin nec sapien dignissim, ornare augue a, tempor dolor. <a href="https://www.w3schools.com/jquery/jquery_events.asp" target="_blank">A link to a jQuery tutorial.</a> Vestibulum non turpis at libero malesuada interdum eu a metus. Praesent accumsan volutpat turpis, vel tempor mi bibendum sit amet. Pellentesque fringilla maximus ornare. Phasellus ut metus sit amet lorem tristique tristique.
					</p>
				</div>
				<div class="footer">
					<div class="links">
						<a class="main" href="https://www.w3schools.com/" target="_blank">
							Go to w3schools
						</a>
					</div>
				</div>
			</article>

			<article class="card black">
				<div class="header">
					<h2>css-tricks</h2>
				</div>
				<div class="body">
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis gravida magna eget sollicitudin. Proin nec sapien dignissim, ornare augue a, tempor dolor. Nulla eu velit diam. Vestibulum non turpis at libero malesuada interdum eu a metus. Praesent accumsan volutpat turpis, vel tempor mi bibendum sit amet. <a href="https://css-tricks.com/breakout-buttons/" target="_blank">How to do this with only CSS (sorta).</a> Phasellus ut metus sit amet lorem tristique tristique.
					</p>
				</div>
				<div class="footer">
					<div class="links">
						<a class="main" href="https://css-tricks.com/" target="_blank">
							Go to css-tricks
						</a>
					</div>
				</div>
			</article>

			<article class="card blue">
				<div class="header">
					<h2>Stack Overflow</h2>
				</div>
				<div class="body">
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis gravida magna eget sollicitudin. <a href="https://stackoverflow.com/questions/1369035/how-do-i-prevent-a-parents-onclick-event-from-firing-when-a-child-anchor-is-cli" target="_blank">Helpfull answers</a> sapien dignissim, ornare augue a, tempor dolor. Nulla eu velit diam. Vestibulum non turpis at libero malesuada interdum eu a metus. Praesent accumsanvolutpat turpis, vel tempor mi bibendum sit amet. Pellentesque fringilla maximus ornare.
					</p>
				</div>
				<div class="footer">
					<div class="links">
						<a class="main" href="https://stackoverflow.com/" target="_blank">
							Go to Stack Overflow
						</a>
					</div>
				</div>
			</article>
		</section>
	</main>
	<div class="statusbar">Show URL on hover link</div>
</body>

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Quicksand:wght@300;400;500;600;700&display=swap");

body {
	min-width: 1000px;
	background-color: #f6f7fb;
	color: #2d2d2d;
	font-family: "Quicksand", sans-serif;
	-webkit-font-smoothing: subpixel-antialiased;
	font-smooth: always;
}

main.container {
	max-width: 1200px;
	margin: 50px auto;
	padding: 25px;
}

section.cards {
	display: flex;
	flex-direction: row;
	gap: 30px;
	justify-content: space-evenly;
	align-items: stretch;
}

article.card {
	display: flex;
	flex-direction: column;
	gap: 15px;
	max-width: 300px;
	padding: 25px;
	cursor: pointer;
	border-radius: 8px;
	box-shadow: 8px 5px 16px 0 rgb(0 0 0 / 5%);
}

.card.black {
	background: #152533;
	color: #fff;
	border: 1px solid #0d1821;
}
.card.blue {
	background: #23547d;
	color: #fff;
	border: 1px solid #1d4667;
}

.card.yellow {
	background: #fee900;
	color: #0e1b26;
	border: 1px solid #f0dc00;
}

.card.black .links a.main {
	background: #fee900;
	color: #0e1b26;
	border: 1px solid #f0dc00;
}

.card.yellow .links a.main,
.card.blue .links a.main {
	background: #122230;
	color: #fff;
}

.card .header {
	font-size: 32px;
	min-height: 0vw;
	font-family: "lato", sans-serif;
	font-weight: 900;
}

.card .body {
	font-size: 16px;
	line-height: 1.4;
	flex-grow: 1;
}

.card .body a {
	color: inherit;
}
.card .body a:hover {
	text-decoration: none;
}

.card .footer {
	display: flex;
	justify-content: flex-end;
}

.card .footer .links {
	display: flex;
	justify-content: flex-end;
}

.card .footer .links a:hover {
	transition: all 0.4s ease-in-out;
	transform: scale(1.1);
}

.card .footer .links a.main {
	transition: all 0.2s ease-in-out;
	padding: 12px 20px;
	font-weight: bold;
	text-decoration: none;
	border-radius: 50px;
}

::selection {
	background-color: rgb(255 255 255 / 95%);
	color: #000;
}

.statusbar {
	position: fixed;
	left: 0;
	bottom: 0;
	font-size: 12px;
	font-family: Segoe UI;
	padding-top: 5px;
	padding-bottom: 6px;
	padding-left: 3px;
	padding-right: 10px;
	color: #3c4043;
	border: 1px solid #dedede;
	border-top-right-radius: 4px;
	transition: all 0.2s ease-in-out;
	background-color: #dee1e6;
	opacity: 0;
	-webkit-font-smoothing: none;
	font-smooth: never;
}

// When you click inside one of the cards
$(".card").on("click", function (e) {
	// Find the card that got clicked and save it into a variable
	var card = $(this);
	// Find all the links in this card and save them into a variable
	var links = $(card).find("*[href]");
	// Find the main link of this card and save it into a variable
	var mainlink = $(card).find("a.main");

	// Check if a mainlink is present
	if ($(mainlink).length) {
		// If the clicked element is already a link, leave it
		if ($(e.target).is(links)) {
			e.stopPropagation();
		} else {
			// When it's not, make sure the user is not selecting text
			if (window.getSelection().toString() == "") {
				// Find the url of the main link and save it into a variable
				var href = $(mainlink).attr("href");
				// Find the target of the main link and save it into a variable
				var target = $(mainlink).attr("target");

				// If the target is '_blank'
				if (target === "_blank") {
					// Open the url in a new window
					window.open(href);
				} else {
					// If not, open the url in the current window
					window.location = href;
				}
			}
		}
	}
});

// When you hover over one of the cards
$(".card").hover(
	function () {
		// Find the card that got hovered and save it into a variable
		var card = $(this);
		// Find the main link of the card and save it into a variable
		var mainlink = $(card).find("a.main");
		// Find the url of the main link and save it into a variable
		var href = $(mainlink).attr("href");

		// Show a status bar with the url of the main link
		window.status = href;
		// CSS fallback solution in case no browser status bar is showing
		$(".statusbar").text(href);
		$(".statusbar").css("opacity", "1");
	},
	function () {
		// On hover out, empty the status bar or hide it
		window.status = "";
		$(".statusbar").css("opacity", "0");
	}
);

// When you hover over one of the other links inside the card
$(".card a").hover(
	function () {
		// Hide the fallback status bar because the browser already shows one
		$(".statusbar").css("opacity", "0");
	},
	function () {
		// On hover out, show the fallback status bar once again.
		$(".statusbar").css("opacity", "1");
	}
);

Run Pen

This Pen is owned by Xelium on CodePen. It is a fork of this Pen.

See more by @xelium on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js