放置锚标记以覆盖元素的语义正确方法

Question

我正在尝试将一个锚标记显示为一个块来覆盖整个元素，其中包含图像，一些文本和一些其他链接。至于现在，我试图找到正确的方法来放置锚标记，这样它就不会留空而没有任何内容包装，但仍然将文本包裹在里面而不是覆盖其他链接。

我尝试了各种各样的方法，例如将它放在包裹H2元素上（由于它们的位置不同，它不起作用，结果很乱，它不会覆盖图像），将它包装在内容元素周围（语义上不正确，因为内容元素包含其他链接，到处都有大量错误呈现的锚标记），在内容元素中将其留空（不会因为它赢得了＆＃39） ; t覆盖整个图像，因为它不是他们的直接孩子）并且在内容元素之外将其留空（也不起作用，因为标题和描述不是锚标记，因此不可点击）。

我现在提出的解决方案是删除内容包装器并将空锚标签与文本和其他链接一起直接放置为.entry子项，但这样文本将无法正确对齐并且高度：之前：和：之后用于设置悬停效果样式的元素不会像现在这样限制内容。我还尝试将其他链接移动到内容包装器之外，以使其与锚点包含在同一父节点下，但我对其定位一无所知。

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%;
    }

}

感谢您的帮助！

编辑：我现在提出的另一个解决方案是创建另一个锚标记，并将它们中的每一个放在.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一样，我也对你的要求有点困惑。但根据我的理解，我相信您希望整个内容（图像和文本）具有到另一个页面的链接。但与此同时，细节内部的链接（作者链接）也应该有效吗？

那么为什么不尝试为z-index元素添加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 */
}

希望它有所帮助！

JSFiddle Link

Answer 3

当我改变'.entry＆gt;上的z-index时，Jsfiddle似乎没有工作。 .article .link'到0它运行正常。在我看来，空链接会让你烦恼，而且你正在寻找一种与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>

article-wrapper {position：relative; z-index：0;}

详情{position：absolute; z-index：10;}

没有测试过这个特定的代码，但是你明白了。希望有所帮助。