Więc ktoś dał mi dobre rozwiązanie w składowaniu nakładki, ale powoduje, że nakładka rozszerza się pionowo, łamanie efektu nakładki w WordPress (chociaż wygląda dobrze w Codepen).

Znalazłem kolejne rozwiązanie, które miało dodać pointer-events: none;, co pozwoliło na kliknięć nakładki, biorąc do innego adresu URL. Próbowałem wdrożyć go w WordPress, ponieważ funkcje Codepen, jak powinno, ale do mojego przerażenia, nie działa w WSTPress.

Czy istnieje alternatywa, aby nakładka klikalna bez rozszerzania siatki nakładki lub złamanie nakładki i tekstów w WordPress?

Celem jest nadal utrzymywanie tekstu na obrazie, gdy pojawi się mysz, pojawi się nakładka, umożliwiając kliknięcie, aby przekierować na inną stronę.

CSS

.posts {
  position: absolute;
  z-index: 1;
  bottom: 5px;
  color: white;
}

.overlay:after {
  content: '';
  position: absolute;
  display: block;
  height: calc(100% - 10px);
  width: calc(100% - 10px);
  top: 5px;
  left: 5px;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  pointer-events: none;
}

.overlay:hover:after {
  opacity:1;
}

HTML

<div class="js-masonry">
    <?php if( have_posts() ): while( have_posts() ): the_post();?>
    <div class="item-masonry overlay">
    <a href="#">
        <div class="posts">
            <p><h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a ligula sollicitudin, euismod nibh in, feugiat lectus.</h2></p>
        </div>
        <img src="#"/>
      </a>
    </div>
    <?php endwhile; else: endif;?>
</div>
0
user13859048 29 lipiec 2020, 06:43

1 odpowiedź

Najlepsza odpowiedź

Dowiedziałem się, że problem. pointer-events: none; działa.

Jeśli piszesz normalne teksty w polu, cała nakładka można kliknąć na.

Jeśli chcę zadzwonić do <?php the_excerpt();?>, całe hiperłącze zostaną wezwani do fragmentu z jakiegoś powodu. Usunięcie tego umożliwi całą miniaturę i prawidłowo nakłada się na hiperłącze.

Dzwoniąc <?php the_title();?> i <?php the_date('m-d-y', '<h2>', '</h2>');?> działa dobrze.

0
user13859048user13859048 29 lipiec 2020, 08:28