의미 적으로 요소를 덮기 위해 앵커 태그를 배치하는 올바른 방법

Question

이미지, 일부 텍스트 및 기타 링크가 포함 된 전체 요소를 포함하도록 앵커 태그를 블록으로 표시하려고합니다. 현재로서는 앵커 태그를 배치 할 올바른 방법을 찾으려고 노력 중이므로 래핑 할 내용이 없어도 빈 태그가 표시되지 않지만 여전히 다른 링크를 포함하지 않고 텍스트를 배치합니다.

H2 요소를 감싸는 등의 다양한 방법을 시도했습니다. 위치가 다르므로 결과가 엉망이며 이미지를 덮지 않으므로 작동하지 않습니다. (내용 요소가 다른 링크를 포함하고 있기 때문에 의미 적으로 부정확하고, 잘못 렌더링 된 앵커 태그가 너무 많았습니다), 내용 요소 안에 비어있게되었습니다 (전체 이미지를 그대로 커버하지 않기 때문에 작동하지 않습니다. 직접 자식이 아님) 콘텐츠 요소 외부에 비워 두었습니다 (제목과 설명이 앵커 태그가 아니기 때문에 잘 작동하지 않으므로 클릭 할 수 없습니다).

내가 지금 생각해내는 해결책은 내용 래퍼를 삭제하고 텍스트 및 기타 링크와 함께 빈 앵커 태그를 .entry 하위로 직접 배치하는 것이지만 텍스트가 올바르게 정렬되지 않도록하고 호버 효과의 스타일을 지정하는 데 사용한 : : before : and : after 요소의 높이가 현재 그대로 콘텐츠에 제한되지 않습니다. 나는 또한 콘텐츠 래퍼 외부의 다른 링크를 앵커와 동일한 부모 아래에 배치하도록 이동하려고 시도했지만 위치 지정에 대해서는 전혀 알지 못합니다.

JSFIDDLE : https://jsfiddle.net/qbppubbx/6/

HTML :

<ul> 
       <!--ditambahkan deskripsi, tapi berat. animasinya pakai css3, saya gagal jquery orz--> 
       <li class="opinion wrapper"> 
        <div class="opinion container"> 
         <div class="entry entry-1" style="background-image:url(img/contohgambar.jpg);"> 
          <a href="" title="" class="article link"></a> 
           <div class="opinion content"> 
            <h2 class="title">I have here two pledges that I shall yet slay Moby Dick and survive it. </h2> 
            <span class="details"> 
             <a href="/test" title="" class="author">Nama Penulis</a>/
             <a href="/date" title="" class="date ">Tanggal Penulisan</a> 
            </span> 
            <p class="description hide-text"> 
             Both were silent again, as one man. The grey dawn came on, and the slumbering crew arose from the boat's bottom, and ere noon the dead whale was brought to the ship. 
            </p> 
           </div> 
         </div> 
        </div> 
       </li> 
      </ul> 

CSS : 도움을

.wrapper { 
    float: left; 
    margin:0 0 0 0; 
    padding: 0 0 0 0; 
    box-sizing: border-box; 
} 

.container { 
    position: relative; 
    height: inherit; 
    overflow: hidden; 
} 

.opinion.container { 
    margin: 15px; 
} 

.entry { 
    height: inherit; 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: cover; 
} 

.entry .content { 
    position: absolute; 
    bottom: 20px; 
    left: 20px; 
    right: 20px; 
    text-align: left; 
} 

.entry > .article.link { 
    display: block; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index: 2; 
} 

.content .title, 
.content .details { 
    background-color: #000; 
    color: #fff; 
    display: inline; 
    position: relative; 
} 

.content .title { 
    font-family: "Patua One", "Georgia", serif; 
    font-size: 40px; 
    font-size: 2.2222rem; 
} 

.content .details { 
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif; 
    font-size: 18px; 
    font-size: 1rem; 
    z-index: 3; 
} 

.content .details > a { 
    color: #505eea; 
} 

.content .details:before, 
.content .description:before { 
    content: ""; 
    display: block; 
    margin-top: 10px; 
} 


.content .description { 
    font-family: "Roboto", "Arial", sans-serif; 
    font-size: 14px; 
    font-size: 0.7778rem; 
    font-style: italic; 
    color: #f1f1f1; 
    opacity: 0; 
    position: relative; 
    width: 95%; 
    z-index: 1; 
    line-height: 1.5; 
} 


.opinion.content:before, 
.opinion.content:after{ 
    position: absolute; 
    content: ""; 
    width: 0; 
    opacity: 0; 
    z-index: 0; 
} 


.opinion.content:before { 
    top: -10px; 
    right: 10px; 
    height: 110%; 
    background: #000; 
} 

.opinion.content:after { 
    border: 3px solid #ffe400; 
    bottom: 0; 
    height: 105%; 
    right: 0px; 
    background: transparent; 
} 

.hide-text { 
    height: 0; 
    text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
} 

.opinion.container:hover .content .title, 
.opinion.container:hover .content .details { 
    background-color: transparent; 
} 


.opinion.container:hover .content .title { 
    color: #505eea; 
} 

.content .details > a:hover { 
    color: #fff; 
} 

.opinion.container:hover .content .title, 
.details a:hover { 
    transition: 0.25s ease-in-out; 
} 

.opinion.container:hover .opinion.content:before { 
    opacity: 0.9; 
} 

.opinion.container:hover .opinion.content:after, 
.opinion.container:hover .content .description { 
    height: 100%; 
    opacity: 1; 
} 

.opinion.container:hover .opinion.content:after { 

} 

/*timing animasi*/ 
.opinion.content, 
.opinion.content:before, 
.opinion.content:after, 
.opinion.container:hover .content .title, 
.details a:hover, 
.opinion.container:hover .content .description, 
.opinion.container:hover .opinion.content:before, 
.opinion.container:hover .opinion.content:after { 
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; 
    transition: opacity 0.35s, transform 0.35s; 
} 


/*efek geser dari kiri ke kanan*/ 
/*initializing*/ 
.opinion.content:before, 
.opinion.content:after { 
    -webkit-transform: translate3d(-100%,0,0); 
    transform: translate3d(-100%,0,0); 
} 

/*on hover*/ 
.opinion.container:hover .opinion.content:before, 
.opinion.container:hover .opinion.content:after { 
    width: 115%; 
    -webkit-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
} 


/*efek geser dari atas ke bawah*/ 
/*initializing*/ 
.opinion.content { 
    -webkit-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
} 

/*on hover*/ 
.opinion.container:hover .opinion.content { 
    -webkit-transform: translate3d(0,-20px,0); 
    transform: translate3d(0,-20px,0); 
} 


@media (min-width: 1280px) { 

    .home.container { 
     max-width: 1200px; 
    } 

    .wrapper { 
     height: 618px; 
    } 

    .opinion.card.container:hover .opinion.card.description { 
     width: 90%; 
    } 

    .wrapper { 
     display: inline-block; 
     width: 33.3333333%; 
    } 

    .opinion.wrapper:first-child { 
     width: 66.66666666666%; 
    } 

} 

감사합니다!

EDIT : 다른 해결책은 다른 앵커 태그를 만들고 각 요소를 .entry 요소와 텍스트 래퍼 (.content)에 배치하는 것입니다. 그렇게하면 이미지와 텍스트가 모두 포함됩니다. 나는 원래 같은 앵커 태그가 두 번 언급되거나 사용된다는 것을 의미하기 때문에 원래이 방법을 사용하고 싶지는 않습니다. 의미 상 정확할 지 여부는 확실하지 않습니다. 현재로서는 다른 제안이 오기를 기다리고 있습니다.

JSFIDDLE : https://jsfiddle.net/wq6tje6g/1/

Answer 1

이 솔루션은 내 것이 아니라 나뿐만 아니라 여기에 게시 될 수 있습니다

http://jsbin.com/yifozizaju/edit?html,css,output

<article class="post-57 post type-post status-publish format-standard has-post-thumbnail hentry category-perspektif"> 
    <div class="entry-thumb"> 
     <a href="http://google.com"><img width="1108" height="738" src="http://lorempixel.com/1108/738/" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" /></a> 
    </div> 
    <!-- entry-thumb --> 
    <div class="entry-head"> 
     <h2 class="entry-title"> 
      <a href="http://google.com">Iusto labore non et</a> 
     </h2> 
     <div class="entry-meta"> 
      <span class=""><a href="http://asu.com" rel="category tag">Perspektif</a></span> 
      <span class="byline author vcard"><a href="http://localhost/youthproactive/author/admin/" rel="author" class="fn">admin</a></span> 
      <time class="updated" datetime="2016-05-25T12:43:06+00:00">May 25, 2016</time> 
     </div> 
    </div> 
</article> 

감사합니다!

Answer 2

처럼 @Arun는 또한 당신의 요구에 조금 혼란 스러워요. 그러나 내가 이해 한 것을 토대로 전체 내용 (이미지와 텍스트)이 다른 페이지로의 연결을 원한다고 생각합니다. 그러나 동시에 세부 내 링크 (작성자 링크)도 작동해야합니까? 아닙니다.

그런 다음 값을 9999 또는 그 부분의 <div class="opinion content">...</div> 요소에 추가해보세요.

CSS는 다음과 같습니다

.opinion.content { 
    -webkit-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 

    z-index: 99999; /* <------------- added by Akhilesh */ 
} 

는 희망이 도움이!나는 그것이 잘 작동 0 '.entry> .article .link'에 Z- 인덱스를 변경하는 경우

JSFiddle Link

Answer 3

Jsfiddle는 제대로 동작하지 않았다. 빈 링크가 문제가되고 jsfiddle에있는 것보다 다른 구조를 찾고있는 것처럼 보입니다. 이 작업을 수행하기 위해 생각할 수있는 또 다른 유일한 방법은 두 앵커 태그 이외의 모든 앵커를 유지하고 주 앵커 외부에있는 모든 항목을 유지하면서 앵커가있는 래퍼에 배치 한 다음 절대 위치로 설정하는 것입니다. exmaple 들어

...

<div id="article-wrapper"> 
    <a href="articlelink.com" class="article"> 
     <h1>Article Title</h1> 
     <p>Article description</p> 
    </a> 
    <div id="details"> 
     <a href="author">Author</a> 
     <a href="date">Date</a> 
    </div> 
</div> 

문서 래퍼 {총수 : 상대; Z- 색인 : 0;}

세부 정보 {위치 : 절대; z-index : 10;}

이 특정 코드는 테스트하지 않았지만 아이디어를 얻었습니다. 희망이 도움이됩니다.