使 <div> 元素悬停时可点击

Question

我正在开发一个使用 WordPress 的网站（我的第一个网站），但我正在通过 HTML 和 CSS 代码调整一些小东西。

我在网格中有一堆图片，我希望它们可以点击。所有图片都有一个叠加层，当光标悬停在它们上面时会出现，并且在其顶部有一个（永久的）可点击标题。

我希望图像或叠加层可以整体点击。但是，我无法使其正常运行。我尝试将 <a href> 和 </a> around the overlay, but this makes the overlay disappear altogether. If I try the same basic structure (`) 放在不同的位置，它似乎确实有效，所以可能与元素 'higher up'.

我对此很陌生，所以我可能会忽略一些非常基本的东西。我添加了一段 HTML 和 CSS，但由于它是 WP 结构的一部分，我无法添加所有相关的 CSS。

#featured-categories #categories-container .category-wrapper {
  height: 300px;
  display: flex;
}

@media screen and (max-width: 991px) {
  #featured-categories #categories-container .category-wrapper {
    height: 200px;
  }
}

#featured-categories #categories-container .category-wrapper .category-title {
  width: 50%;
  display: inline-block;
  background: #ff5722;
}

#featured-categories #categories-container .category-wrapper .category-title span {
  color: white;
  font-size: 36px;
  display: inline-block;
  float: right;
  margin: 10% 5%;
}

@media screen and (max-width: 768px) {
  #featured-categories #categories-container .category-wrapper .category-title span {
    font-size: 22px;
  }
}

#featured-categories #categories-container .category-wrapper .category-thumbs {
  width: 50%;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
}

#featured-categories #categories-container .category-wrapper .category-thumbs .grid-item {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

#featured-categories #categories-container .category-wrapper .category-thumbs .grid-item img {
  width: 100%;
  max-width: none;
}

#featured-categories #categories-container .category-wrapper .category-thumbs .category-thumb-1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 3;
}

#featured-categories #categories-container .category-wrapper .category-thumbs .category-thumb-1 img {
  width: auto;
  height: auto;
}

.overlay {
  width: 100%;
  height: 100%;
  margin: auto;
  background: rgba(28, 224, 43, 0);
  position: absolute;
}

.category-thumb-1:hover .overlay {
  background: rgba(28, 224, 43, 0.6);
}

.category-thumb-2:hover .overlay {
  background: rgba(28, 224, 43, 0.6);
}

.category-thumb-3:hover .overlay {
  background: rgba(28, 224, 43, 0.6);
}

.post-title-1 {
  color: white;
  position: absolute;
  left: 20%;
  font-size: 28px;
  margin: auto;
  padding-top: 50%;
}

.post-title {
  color: white;
  position: absolute;
  font-size: 24px;
  margin: auto;
  padding-top: 25%;
}

#featured-categories #categories-container .category-wrapper .category-thumbs .category-thumb-2 img,
#featured-categories #categories-container .category-wrapper .category-thumbs .category-thumb-3 img {
  align-self: center;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 600px) {
  #featured-categories #categories-container .category-wrapper .category-thumbs .category-thumb-2,
  #featured-categories #categories-container .category-wrapper .category-thumbs .category-thumb-3 {
    display: block;
  }
}

#featured-categories #categories-container .category-wrapper:nth-child(even) {
  flex-direction: row-reverse;
}

#featured-categories #categories-container .category-wrapper:nth-child(even) .category-title span {
  float: left;
}

<div class="category-wrapper category-<?php echo esc_attr( str_replace( ' ', '-', strtolower( esc_html( get_cat_name($cat) ) ) ) ); ?>">
  <div class="category-title">
    <a href="<?php echo esc_url( get_category_link( $cat ) ) ?>" title="<?php echo esc_attr( get_cat_name($cat) ); ?>"><span><?php echo esc_html( get_cat_name($cat) ); ?></span></a>
  </div>
  <div class="category-thumbs">
    <div class="category-thumb-1 grid-item">
      <?php if ( isset($thumb[0]) && ($thumb[0] != '') ) :
            echo wp_get_attachment_image( $thumb[0], 'large');
           else : ?>
      <img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/placeholder.png' ); ?>">
      <?php endif; ?>
      <div class="overlay" onclick="window.open('https://localhost/greentravel')" style="cursor: pointer;">
      </div>
      <div class="post-title-1">
        <a href="<?php echo $link[0]?>" <span>
          <?php echo $title[0]?>
          </span>
        </a>
      </div>
    </div>
    <div class="category-thumb-2 grid-item">
      <?php if ( isset($thumb[1]) && ($thumb[1] != '') ) :
           echo wp_get_attachment_image( $thumb[1], 'large');
          else : ?>
      <img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/placeholder.png' ); ?>">
      <?php endif; ?>
      <div class="overlay">
      </div>
      <div class="post-title">
        <a href="<?php echo $link[1]?>" <span>
          <?php echo $title[1]?>
          </span>
        </a>
      </div>
    </div>
    <div class="category-thumb-3 grid-item">
      <?php if ( isset($thumb[2]) && ($thumb[2] != '') ) :
           echo wp_get_attachment_image( $thumb[2], 'large');
          else : ?>
      <img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/placeholder.png' ); ?>">
      <?php endif; ?>
      <div class="overlay">
      </div>
      <div class="post-title">
        <a href="<?php echo $link[2]?>" <span>
          <?php echo $title[2]?>
          </span>
        </a>
      </div>
    </div>
  </div>
</div>

Answer 1

为什么不尝试将 <a> 标签放在 <div> 标签内（覆盖）并使 <a> 成为 'display: block' 元素。试一试...

Answer 2

对于寻找答案的其他人：在这个 post 的顶部，当您将鼠标悬停在 OP 的头像（@amn；独角兽 img）上时，它会满足我们的要求。 :-D 它会展开，保持打开状态，并且可以点击头像。

我正试图弄清楚他们是如何做到这一点的，我认为魔法在于提供它：

绝对位置
左、右、上、下
高 z-index，并且
溢出：隐藏

使 <div> 元素悬停时可点击

Make <div> element clickable on hover

html

css

overlay

clickable