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

Question

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

我试过各种方法，比如把它放在H2元素的包裹上（不行，位置不一样，结果乱七八糟，遮不住图），包裹起来在内容元素周围（语义上不正确，因为内容元素包含其他链接，到处都有很多错误呈现的锚标记），在内容元素内将其留空（也不起作用，因为它不会覆盖整个图像，因为它不是他们的直接 children) 并且在内容元素之外将其留空（效果不佳，因为标题和描述不在锚标记旁边，因此不可点击）。

我现在想到的解决方案是删除内容包装器并将空锚标记与文本和其他链接一起直接放置为 .entry children，但这样文本会没有正确对齐，我用来设置悬停效果样式的 :before: 和 :after 元素的高度将不会像现在这样限制在内容上。我还尝试将其他链接移到内容包装器之外，使其与锚点一起包装在相同的 parent 下，但我对它的定位一无所知。

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) 中.这样，图像和文本都将被覆盖。我本来不想使用这种方法，因为这意味着相同的锚标记将 used/mentioned 两次，而且我不确定它是否在语义上是正确的。至于现在，我还在等待其他建议。

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

Answer 1

和@Arun 一样，我对您的要求也有点困惑。但根据我的理解，我相信你希望整个内容（图像和文本）在另一个页面上有一个 link 。但与此同时，details(作者link)里面的links应该也能用了吧？

那为什么不尝试添加 9999 的 z-index 值或为 <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 2

Jsfiddle 似乎没有工作，当我将 '.entry > .article .link' 上的 z-index 更改为 0 时，它工作正常。在我看来，空的 link 给您带来了麻烦，并且您正在寻找与 jsfiddle 中不同的结构。我能想到的实现此目的的唯一其他方法是将除两个锚标记之外的所有内容都保留在锚内，将它们保留在主锚之外，但将它们与锚一起放在包装器中并将它们设置为绝对。

例如...

<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{ 位置：相对； z-index: 0;}

详情{位置：绝对； z-index: 10;}

尚未测试此特定代码，但您明白了。希望对您有所帮助。

Answer 3

这个解决方案不是我的，但我不妨 post 这里：

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>

谢谢！

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

Semantically correct way to place an anchor tag to cover an element

html

css

validation

anchor

article-wrapper{ 位置：相对； z-index: 0;}

详情{位置：绝对； z-index: 10;}