时间戳

首页 > 解决方案 > 将鼠标悬停在一个元素上以使另一个元素可见

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

问题描述

有人告诉我，这不可能仅通过 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';
}

标签： javascripthtmlcssonmouseover

解决方案

首先，您要查找的功能是document.getElementsByClassName. 在此之后，您必须按索引选择特定元素。请参阅此链接。

更好的解决方案是：获取 div 的 id (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>

推荐阅读