我试图放置一个显示为 block 的 anchor 标记，以覆盖包含图像、一些文本和一些其他链接的整个元素。至于现在，我正在尝试找到放置 anchor 标记的正确方法，这样它就不会在没有任何内容要包装的情况下留空，但仍然将文本包装在里面而不覆盖其他链接。
我试过各种方法，比如把它放在H2元素的周围(因为位置不一样所以不行，结果乱七八糟，遮不住图片)，把它包裹在content 元素(语义不正确，因为 content 元素包含其他链接，到处都有很多错误呈现的 anchor 标记)，在 content 元素中将其留空(也不起作用，因为它不会覆盖整个图像，因为它不是他们的直系子代)并将其在内容元素之外留空(效果不佳，因为标题和描述不在 anchor 标签旁边，因此不可点击)。
我现在想到的解决方案是删除内容包装器并将空 anchor 标记与文本和其他链接一起直接作为 .entry 子级放置，但那样的话文本将无法正确对齐并且我用来设置悬停效果样式的 :before: 和 :after 元素的高度将不再像现在那样受限于内容。我还尝试将其他链接移到内容包装器之外，以使其与 anchor 一起包装在同一父项下，但我对其定位一无所知。
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%;
}
}
感谢您的帮助!
编辑:我现在想到的另一个解决方案是创建另一个 anchor 标记并将它们中的每一个都放在 .entry 元素和文本包装器 (.content) 中。这样，图像和文本都将被覆盖。我本来不想使用这种方法，因为这意味着相同的 anchor 标记将被使用/提及两次，而且我不确定它在语义上是否正确。至于现在，我还在等待其他建议。
JSFIDDLE:https://jsfiddle.net/wq6tje6g/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>
谢谢!
关于html - 放置 anchor 标记以覆盖元素的语义正确方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37639551/