Блог

Главная - Вопросы по программированию - Как создать границу вокруг зависшего элемента?

Как создать границу вокруг зависшего элемента?

#javascript #html #css

Вопрос:

Я хочу отобразить границу вокруг элемента, когда он завис. Как это изображение:

введите описание изображения здесь

Проблема в том, что я не хочу, чтобы add добавлял границу или контур к самому элементу, потому что я разрешаю пользователю изменять стили, и это также повлияет на добавленный контур.

Вот что я пытался противопоставить этому:

  1. Созданное наложение div поверх содержимого с помощью position: absolute
  2. Добавлено div внутри него, для которого также установлено значение absolute
  3. Добавлен onmouseover и onmouseout прослушиватель на наложении div , чтобы получить width , height , offsetLeft и offsetTop элемента

Теперь проблема в том, что, поскольку наложение находится сверху, события не срабатывают на элементах внизу (так как мне также нужна информация о вложенном элементе). Я также пытался настроить z-index , но, похоже, это не работает так же хорошо.

Итак, как этого добиться?

PS: Снимок экрана взят из визуального конструктора Webflow, но я не уверен, как они этого добиваются.

Вот код:

 var outlineContainer = document.querySelector('#content-container');
outlineContainer.onmouseover = outlineContainer.onmouseout = handler;

function handler(event) {
  var hoverOutline = document.querySelector('.hover-outline');
  if (event.type == 'mouseover') {
    console.log(event.target.tagName);
    var clientRects = event.target.getBoundingClientRect();
    hoverOutline.style.width = `${clientRects.width}px`;
    hoverOutline.style.height = `${clientRects.height}px`;
    hoverOutline.style.transform = `translate(${event.target.offsetLeft}px,${event.target.offsetTop}px)`;
  }
  if (event.type == 'mouseout') {
    hoverOutline.style.width = 0;
    hoverOutline.style.height = 0;
    hoverOutline.style.left = 0;
    hoverOutline.style.top = 0;
  }
} 
 #content-container {
  border: 2px solid black;
  background-color: white;
  padding: 50px;
  position: relative;
  height: 100%;
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
}

.hover-outline {
  position: absolute;
  border: 2px solid orange;
  z-index: 6;
  top: 0px;
  left: 0px;
  z-index: 3;
}

.content {
  z-index: 4;
} 
 <div id="content-container">
  <div class="overlay">
    <div class="hover-outline"></div>
  </div>
  <div class="content">
    <div class="component">
      <label>Hi</label>
    </div>
    <div class="component">
      <label>Text Field</label>
      <span class="wrapper">
            <input type="text" placeholder="Text Input Field" />
          </span>
    </div>
  </div>
</div>

Комментарии:

1. Может быть, я не понимаю вопроса, но вы пробовали css-селектор :наведите курсор?

2. Поскольку я разрешаю пользователю изменять стили, функциональность CSS по умолчанию в этом случае работать не будет.

3. Когда вы говорите, что пользователь может изменять стили, что он может сделать? Например, могут ли они добавить псевдоэлемент, если нет, можете ли вы его использовать?

Ответ №1:

Возможно, я неправильно понял, что требуется, но не могли бы вы просто изменить цвет границы при наведении курсора? (И удалите JS).

 #content-container {
  border: 2px solid black;
  background-color: white;
  padding: 50px;
  position: relative;
  height: 100%;
}
#content-container:hover {
  border: 2px solid red;
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
}

.hover-outline {
  position: absolute;
  border: 2px solid orange;
  z-index: 6;
  top: 0px;
  left: 0px;
  z-index: 3;
}

.content {
  z-index: 4;
} 
 <div id="content-container">
  <div class="overlay">
    <div class="hover-outline"></div>
  </div>
  <div class="content">
    <div class="component">
      <label>Hi</label>
    </div>
    <div class="component">
      <label>Text Field</label>
      <span class="wrapper">
            <input type="text" placeholder="Text Input Field" />
          </span>
    </div>
  </div>
</div>
Метки: