2016-08-02 4 views
1

그림을 클릭 할 때 링크로 사용자를 리디렉션하고 싶지만 이미지를 클릭 할 때 앵커 태그가 작동하지 않습니다. 하지만 여기에 "CLICK HERE"라는 앵커 태그가 작동합니다.앵커 태그가 부트 스트랩의 그림 태그와 함께 작동하지 않습니다.

<a href="http://google.com"> 
<figure class="effect-ming"> 

<img src="http://example.com/dd.img" alt="Placeholder" /> 

    <figcaption> 
     <p><?php the_title(); ?></p> 
     <a href="<?php the_permalink(); ?>">CLICK HERE</a> 
    </figcaption> 
</figure> 
</a> 

CSS : 당신은 당신의 앵커 태그를 닫을 필요

figure.effect-ming figcaption::before { 
    border: 0px solid #fff !important; 
    bottom: 30px; 
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0) !important; 
    content: ""; 
    left: 30px; 
    opacity: 0; 
    position: absolute; 
    right: 30px; 
    top: 30px; 
    transform: scale3d(1.4, 1.4, 1); 
    transition: opacity 0.35s ease 0s, transform 0.35s ease 0s; 
} 
+0

새 앵커 태그를 열기 전에 각 앵커 태그를 닫아야합니다. * HTML 101 * –

+0

@ Fred-ii- 그냥 닫지 않았다. 제대로 표시되지 않았다. 어쨌든 나는 질문을 업데이트했다. –

답변

1

:

<a href="http://google.com"> 
    <img src="http://example.com/dd.img" alt="Placeholder" /> 
</a> 

<figure class="effect-ming"> 
    <figcaption> 
     <p><?php the_title(); ?></p> 
     <a href="<?php the_permalink(); ?>">CLICK HERE</a> 
    </figcaption> 
</figure> 

내가이 더 나은 것 같아요. 중첩이 잘못되어 figure 태그를 이동했습니다. 이미지를 그림 안에 넣고 싶다면 다음과 같이 할 수 있습니다.

<figure class="effect-ming"> 


    <a href="http://google.com"> 
     <img src="http://example.com/dd.img" alt="Placeholder" /> 
    </a> 

    <figcaption> 
     <p><?php the_title(); ?></p> 
     <a href="<?php the_permalink(); ?>">CLICK HERE</a> 
    </figcaption> 
</figure> 
+0

문제가 남아있다. 나는 figcaption이 img 위에 있기 때문에 앵커 태그를 클릭 할 수 없다고 생각합니다. –

관련 문제