Используйте CSS для перемещения курсора на другой элемент

Question

Я пытаюсь переместить местоположение курсора (указатель мыши), когда элемент отображается. Допустим, у меня есть кнопка в верхней части экрана, которая при нажатии открывает другое место на экране. Они не связаны в документообороте (положение is: fixed>

Когда я показываю новый элемент, я хочу, чтобы курсор мыши переместился на вновь отображаемый элемент, например, на кнопку закрытия внутри него. Я добавил вызов focus (), но не работает ...

function myClick(idName) {
  let listOfBios = document.getElementsByClassName("contents");
  const len = listOfBios.length;
  let elemName = "Content_" + idName; 
  let elem = document.getElementById(elemName);
  elem.focus();
  for(let i = 0; i < len; i++) {
    let theBio = listOfBios[i];

    if(theBio != elem){
      //alert(elemName);
      theBio.classList.remove("show_contents")
    }
  }
  elem.classList.toggle("show_contents", 1);
  elem.focus();
}

Предположим, что остальная часть кода работает, поэтому у меня определенно есть правильный элемент, и ad toggle () работает.

Answer 1

Похоже, что это невозможно сделать только с помощью CSS и JS. Пытаясь закрыть это, я надеюсь, что это так.

Answer 2

Вам понадобится JS для достижения этой цели. См. Ниже, например, с ванильным JS.

по вашему мнению:

<input type="text" id="myTextField" value="Text field.">

в JS:

document.getElementById("myTextField").focus();

Проверьте эту скрипку: https://jsfiddle.net/jz7v53tL/