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。之后，您必须按索引选择特定的元素。请参见此link。

更好的解决方法是：抓取div的ID（id ='b'）并将显示设置为阻止。如您所见，div显示为：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;
}

将鼠标悬停在一个元素上以显示其他元素

2 个答案: