将鼠标悬停在一个元素上以使另一个元素可见

Question

有人告诉我，仅通过 CSS 是不可能的，所以我求助于 javascript。

使用 onmouseover 但我无法让隐藏的元素出现。我想要它，以便当鼠标悬停在 ID #a 的元素上时，带有 class .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。在此之后，您必须 select 按索引查找特定元素。看到这个 .

更好的解决方案是：获取 div (id='b') 的 id 并将显示设置为阻止。如您所见，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 之后，可以通过 adjacent sibling 组合器定位。

.excerpt-box {
  display: none;
}

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

将鼠标悬停在一个元素上以使另一个元素可见

Hover over one element to make a different element visible

javascript

html

css

onmouseover