html - 渐变图像上的两个文本。每个元素都有不同的链接

Question

我为解决问题而发疯。

我有一张有两个标题的图片。标题位于图像上方，图像也具有渐变以提高可读性。

每个标题都有不同的链接，图像链接到另一个 url。

    <div>
    	<a href="www.disney.com">
    		<img alt="image" src="https://cdn.dday.it/system/uploads/cover_element/custom_image/1/prime_cov.jpg">
    	</a>
    	<div class="gradient"></div>
    	<div class="title">
    		<h2>
    			<a href="www.example.com">First title </a>
    			<a href="www.cnn.com">Second title</a>
    		</h2>
    	</div>
    </div>

问题是图像上的文字我无法点击单独的链接。我总是得到图像链接。我该如何解决？

我创造了一支笔。

Codepen

Answer 1

你有

pointer-events: none;

在你的 CSS 中。

这会阻止点击标题。因此发射图像 href。删除它。

.variant-4 #block-1 {
    width: 720px;
    height: 280px;
    border-width: 0 1px 0 0;
}
.cover-block {
    float: left;
    position: relative;
    border: 0px solid #fff;
    width: 360px;
    height: 280px;
}

a {
    color: #1F1F1F;
    cursor: pointer;
    text-decoration: none;
}
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
  color: white;
}

.cover-block .title {
    color: #fff;
    font-family: "proxima-nova-extra-condensed", arial, sans-serif;
    padding: 18px 24px;
    position: absolute;
    bottom: 0;
    z-index: 3;
}

<div class="cover-block horizontal" id="block-1" >
  <a href="/redazione/26926/prime-music-italia">
    <img alt="image" src="https://cdn.dday.it/system/uploads/cover_element/custom_image/1/prime_cov.jpg"/>  </a>
    <div class="gradient"></div>
    <div class="title">
      <h2><a href="http://www.example.com">First title </a> <a href="http://www.cnn.com">Second title</a></h2>
      
    </div>
    

  <a class="comment comments-count-production-content-26926" data-disqus-identifier="production-content-26926" href="/redazione/26926/prime-music-italia#disqus_thread">17</a>
  
</div>