Вы можете использовать JavaScript и CSS для реализации указанного поведения.
Ниже приведен пример HTML-кода:
```html
<!DOCTYPE html>
<html>
<head>
<style>
#crosshair {
position: absolute;
width: 20px;
height: 20px;
border: 1px solid black;
transform: translate(-50%, -50%);
pointer-events: none;
}
</style>
</head>
<body>
<div id="crosshair"></div>
<script>
// Получаем элемент перекрестья с помощью его id
var crosshair = document.getElementById('crosshair');
// Отслеживаем движение мыши
document.addEventListener('mousemove', function(event) {
// Обновляем позицию перекрестья в соответствии с позицией курсора
crosshair.style.left = event.clientX + 'px';
crosshair.style.top = event.clientY + 'px';
});
// Отслеживаем нажатие левой кнопки мыши
document.addEventListener('mousedown', function(event) {
// Получаем позицию нажатия левой кнопки мыши
var clickX = event.clientX;
var clickY = event.clientY;
// Выполняем необходимые действия в месте, где находится курсор
// ...
// Пример: выводим координаты нажатия в консоль
console.log('Нажатие в координатах X:', clickX, 'Y:', clickY);
});
</script>
</body>
</html>
```
В этом примере используется элемент `<div>`, который представляет перекрестье. При движении мыши веб-страницей обновляется позиция перекрестья, чтобы оно следовало за курсором. При нажатии левой кнопки мыши выполняются необходимые действия в месте, где находится курсор. В данном случае, в консоль выводятся координаты нажатия.
CSS-правило `pointer-events: none;` позволяет игнорировать события мыши для перекрестья, чтобы оно не мешало обработке событий в месте, где находится курсор.