Наведите указатель мыши на один элемент, чтобы увидеть другой элемент

Question

Мне сказали, что это невозможно только с помощью CSS, поэтому я обратился к javascript.

Используя onmouseover, но я не могу отобразить скрытый элемент. Я хочу, чтобы при наведении курсора на элемент с ID #a элемент с классом .excerpt-box появлялся, а затем исчезал, когда мышь перемещается.

Кто-нибудь знает, где я ошибаюсь? Спасибо

Вот код, который я написал до сих пор:

CSS включает скрытую видимость для .excerpt-box.

          <div class="ind-circle" id="a" onmouseover="showExcerpt()">
            <p class="circle-title"> <a href="#">Read more</a></p>
          </div>
          
          <div class="excerpt-box" id="b">
          <h1 class="excerpts-title">This is an example excerpt title...</h1>
          <img class="excerpts-fi" src="<?php echo BASE_URL . '/assets/images/water.jpg'; ?>" alt="">
          <p class="excerpts-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        </div>

function showExcerpt() {
  document.getElementByClass('excerpt-box').style.visibility = 'visible';
}

Answer 1

Во-первых, вы ищете функцию document.getElementsByClassName. После этого вам нужно выбрать конкретный элемент по индексу. См. Эту ссылку .

Лучше было бы это решение: возьмите идентификатор div (id = 'b') и установите отображение на блокировку. Как видите, это div display: none; при запуске.

function showExcerpt() {
  document.getElementById('b').style.display = 'block';
}

.excerpt-box {
  display: none;
}

<div class="ind-circle" id="a" onmouseover="showExcerpt()">
  <p class="circle-title"> <a href="#">Read more</a></p>
</div>

<div class="excerpt-box" id="b">
  <h1 class="excerpts-title">This is an example excerpt title...</h1>
  <img class="excerpts-fi" src="<?php echo BASE_URL . '/assets/images/water.jpg'; ?>" alt="">
  <p class="excerpts-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

Answer 2

Ваша структура HTML также позволяет делать то же самое через CSS.

.excerpt-box идет сразу после .ind-circle и может быть нацелен через соседний родственник комбинатор .

.excerpt-box {
  display: none;
}

.ind-circle:hover + .excerpt-box {
  display: block;
}