Создание «фиктивной» кнопки для кликабельного контейнера ⇐ CSS

[Anonymous]

TL; ДР: Пытаюсь создать фиктивную кнопку с эффектом наведения в интерактивном контейнере.
Предисловие: Я ищу ТОЛЬКО решения HTML/CSS (я уже знаю, как это сделать с помощью JS).
Я работаю над простым дизайном карточки, состоящей из контейнера и ссылки-кнопки. Я хочу, чтобы весь контейнер действовал как ссылка, т. е. пользователь мог щелкнуть в любом месте внутри контейнера, чтобы добраться до пункта назначения. Моя цель — сделать это без использования нескольких элементов a.
Требования к поведению этой карточки:

• Пользователь наводит курсор на кнопку и видит эффект наведения кнопки.
• Пользователь наводит курсор на контейнер и не видит наведения НЕТ эффект на кнопку.
• Пользователь нажимает в любом месте внутри контейнера, в том числе на кнопку, и он перемещается на связанную страницу.

--- Что я пробовал ----
Чтобы избежать нескольких элементов a или переноса всего контейнер в элементе a, я применил следующий подход:

• Я абсолютно позиционировал настоящий элемент a так, чтобы принимать клики из любого места внутри контейнера.
• Вместо этого я создал фиктивную кнопку div, чтобы заменить настоящую элемент и переместил его на передний план, чтобы его можно было навести (с помощью z-index).

Код: Выделить всё

.container {
position: relative;
/* This is the important one, the rest is styling */
width: 200px;
height: 200px;
padding: 16px;
border: solid 1px black;
display: flex;
justify-content: center;
align-items: center;
}

.button {
z-index: 1;
/* This is the important one, the rest is styling */
width: min-content;
height: min-content;
padding: 8px;
background: red;
white-space: nowrap;
color: white;
}

.button:hover {
background: darkred;
cursor: pointer;
}

a.cover {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}

Код: Выделить всё

[url=#]Real link[/url]
Dummy link

Этот подход удовлетворяет первому и второму требованиям поведения, перечисленным выше, но не 3-й. Нажатия на фиктивную кнопку не передаются элементу a ниже.
Если я использую события указателя: none на фиктивной кнопке для передачи клика к элементу a, то на фиктивной кнопке не будет анимации наведения, что нарушает первое требование. Применение того же свойства с псевдоселекторами :hover или :active приближает меня к цели, но затем третье требование снова нарушается.
Я попробовал разместить элемент a сверху (т. е. удаление z-index: 1 ; из фиктивной кнопки) для удовлетворения третьего требования; тогда для перехода по ссылке через фиктивную кнопку не потребуется никаких кликов. Однако тогда фиктивная кнопка находилась под элементом a, поэтому на нее больше не наводились курсоры, что нарушало первое требование.
Я попытался решить эту проблему, используя одноуровневые селекторы для включить эффект наведения фиктивной кнопки при наведении курсора на элемент a. Однако затем фиктивная кнопка появлялась «зависшей», когда курсор находился в любом месте контейнера, а не только тогда, когда курсор находился непосредственно над кнопкой, что нарушало второе требование.
Это меня смутило. в тупике. Я был бы признателен за любые рекомендации о том, как добиться этого эффекта с помощью вышеуказанных требований (опять же, ищу решения HTML/CSS ТОЛЬКО).
РЕДАКТИРОВАТЬ: Прямо под «Что я пробовал», я упомянул, что хочу избежать заключения всего этого в тег , но забыл упомянуть почему. Это потому, что внутри контейнера будут дополнительные несвязанные ссылки, а поскольку я не могу вкладывать теги, контейнер не может быть элементом a. Я просто хочу избежать нескольких ссылок, указывающих на одно и то же место. Приносим извинения за путаницу.

Подробнее здесь: https://stackoverflow.com/questions/790 ... -container