使悬停背景具有 link 它的标题

Question

所以我面临着一个非常大的问题。我有一张图片，当鼠标悬停时，会出现一个带有标题的白框。现在标题在页面上有一个 link 而不是框。我尝试了很多事情（例如：将 "display:inline-block;" 应用于 css (...)）但仍然没有应用 link。重点是每个框都具有相同的 link 标题。

页面的link是：

http://portugalweddingphotographer.com/portfolio/

Answer 1

试试这个：

.cosmo-thumb-view.title-over article section .padding_visible > a{
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

Answer 2

由内而外。将大小设置为 link，其余的将相应调整大小。你可以用很少的 CSS.

来做到这一点

/* Everything is an inline block to make it easy, although not strictly necessary */
.entry-content,
.padding_visible,
.padding_visible a {
  display: inline-block;
}

/* I've made this a background now. You can do this using inline styles of course, for your image gallery. */
.entry-content {
  background-image: url('http://portugalweddingphotographer.com/wp-content/uploads/2015/07/rsz_untitled-6707.jpg');
  background-size: cover;
}

/* Let the a define the padding, that way, it covers the whole of its parents,
   and you can even click outside the white area. */
.padding_visible a {
  padding: 15px;
  vertical-align: bottom; /* Eliminate some extra space at the bottom */
}

/* Let the  span size it. It will strech the a and its parents. */
.entry-content .padding_visible a span {
  display: table-cell;
  width: 200px;
  height: 200px;
  vertical-align: middle;
  text-align: center;
  background-color: rgba(255, 255, 255, 0);
  opacity: 0;
}

/* Trick: change the span when the a is hovered. */
.entry-content .padding_visible a:hover span {
  background-color: rgba(255, 255, 255, 0.8);
  opacity: 1;
}

<section class="entry-content ">
  <div class="padding_visible">
    <a href="http://portugalweddingphotographer.com/gallery/le-quinta-vintage-my-vintage-wedding-portugal/" rel="bookmark">
      <span class="entry-title the-title-hover">
        THE QUINTA MY VINTAGE WEDDING PORTUGAL                 
      </span>
    </a>
  </div>
</section>
<section class="entry-content ">
  <div class="padding_visible">
    <a href="http://portugalweddingphotographer.com/gallery/le-quinta-vintage-my-vintage-wedding-portugal/" rel="bookmark">
      <span class="entry-title the-title-hover">
        THE QUINTA MY VINTAGE WEDDING PORTUGAL                 
      </span>
    </a>
  </div>
</section>
<section class="entry-content ">
  <div class="padding_visible">
    <a href="http://portugalweddingphotographer.com/gallery/le-quinta-vintage-my-vintage-wedding-portugal/" rel="bookmark">
      <span class="entry-title the-title-hover">
        THE QUINTA MY VINTAGE WEDDING PORTUGAL                 
      </span>
    </a>
  </div>
</section>

使悬停背景具有 link 它的标题

Make an hovering background have the link it's title has

html

css

background

hyperlink

hover