Сделайте <div>элемент кликабельным при наведении - PullRequest
Новая
       21

Сделайте <div>элемент кликабельным при наведении

0 голосов
/ 06 ноября 2019

Я работаю над сайтом (моим первым), который использует 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>

1 Ответ

0 голосов
/ 06 ноября 2019

почему бы вам не попробовать поместить тег <a> внутри тега <div> (наложение) и сделать <a> элементом 'display: block'. Просто попробуй ...

...