<svg class="defs" viewBox="0 0 496 512" width="0" height="0" title="grin">
	<defs>
  	<path id="face" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm80 168c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-160 0c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm80 256c-60.6 0-134.5-38.3-143.8-93.3-2-11.8 9.3-21.6 20.7-17.9C155.1 330.5 200 336 248 336s92.9-5.5 123.1-15.2c11.3-3.7 22.6 6.1 20.7 17.9-9.3 55-83.2 93.3-143.8 93.3z" />
	</defs>
</svg>

<div class="wrapper">
	<ul data-list>
		<li>
			<a data-link="Jimmy" href="#0">
				<svg viewBox="0 0 496 512" width="50" aria-hidden="true" focusable="false">
					<use href="#face"></use>
				</svg>
				<span>Jimmy</span>
			</a>
		</li>
		<li>
			<a data-link="Roberta" href="#1">
				<svg viewBox="0 0 496 512" width="50" aria-hidden="true" focusable="false">
					<use href="#face"></use>
				</svg>
				<span>Roberta</span>
			</a>
		</li>
		<li>
			<a data-link="Charlie" href="#2">
				<svg viewBox="0 0 496 512" width="50" aria-hidden="true" focusable="false">
					<use href="#face"></use>
				</svg>
				<span>Charlie</span>
			</a>
		</li>
	</ul>

	<div class="block-link-area" data-link-area aria-role="region" aria-live="polite">
		<a class="block-link" href="/" data-button-link>Visit page</a>
	</div>
</div>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");

* {
	box-sizing: border-box;
}

body {
	font-family: "Open Sans", sans-serif;
	margin: 0;
	padding: 2rem;
	min-height: 100vh;
	display: grid;
	place-items: center;
}

[hidden] {
	display: none;
}

svg {
	width: 100%;
	height: auto;
	fill: currentColor;
}

svg.defs {
	display: none;
}

.wrapper {
	position: relative;
}

ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0;
	padding: 0;
}

li {
	position: relative;
}

a {
	display: block;
	color: inherit;
	padding: 0.5rem;
}

a > * {
	pointer-events: none;
}

a span {
	display: none;
	position: absolute;
	bottom: calc(100% - 1rem);
	left: calc(100% - 1rem);
	background: yellow;
	border-radius: 0.4rem;
	z-index: 1;
}

a:hover,
a:focus,
a.is-active {
	color: orangered;
}

a:hover span,
a:focus span,
a.is-active span {
	display: block;
	width: 150px;
	text-align: center;
	padding: 0.25rem;
	color: black;
}

.block-link-area {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 1rem;
}

.block-link {
	padding: 0.75rem 1.5rem;
	border-radius: 0.4rem;
	border: 1px solid;
	background: yellow;
}
const links = [...document.querySelectorAll('[data-link]')]
const list = document.querySelector('[data-list]')
const blockLink = document.querySelector('[data-button-link]')

const isHoverableDevice = window.matchMedia('(hover: hover) and (pointer: fine)')

blockLink.hidden = true

list.addEventListener('click', (e) => {
	if (!e.target.dataset.link || isHoverableDevice.matches) return
	
	e.preventDefault()
	
	links.forEach((el) => {
		el.classList.remove('is-active')
	})
	
	blockLink.hidden = false
	blockLink.innerText = `Visit ${e.target.dataset.link}’s page`
	blockLink.setAttribute('href', e.target.href)
	e.target.classList.add('is-active')
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.