Только верхняя половина элемента div, вложенного в якорь, доступна для кликов. ⇐ CSS

[Anonymous]

Основная идея здесь заключается в том, что у меня есть потрясающая стрелка вниз внутри круга div. Я хочу иметь возможность щелкнуть кружок и автоматически прокрутить страницу вниз до уровня чуть выше круга. Все в нем работает, за исключением того факта, что кликабельна только верхняя половина круга. Bootstrap используется для строк и столбцов. Браузер — Chrome. Я открыт для другого решения (при условии, что это просто HTML и CSS), но также хотел бы знать, почему именно возникает эта ошибка.

HTML

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

[url=#howitworks]

[i][/i]

[/url]

CSS

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

.HowItWorks__anchor {
position: absolute;
top: -50px;
}

.HowItWorks__downArrow {
color: $white;
background-color: $brand-blue-dark;
height: 50px;
width: 50px;
border-radius: 100%;
text-align: center;
padding-top: 5px;
position: absolute;
bottom: -22px;
left: calc(50% - 25px);
}

Снимок экрана




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