在梯度图象的两个文本。每个元素都有不同的链接

Question

我为解决这种情况而疯狂。

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

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

    <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。 删除它。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;