使<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 (`）放在另一个位置，它似乎确实有效，所以也许它与“更高”的元素有关。

我对此很陌生，因此我可能会忽略一些非常基本的内容。我添加了一段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

对于寻找答案的其他人：在此 page 上，当您将鼠标悬停在用户的头像（@amn；独角兽 img）上时，它会执行我们正在寻找的操作。 :-D 它会展开，保持打开状态，并且头像是可点击的。

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

• 绝对位置
• 左、右、上和下
• 高 z-index 和
• 溢出：隐藏