製作圖像疊加點擊鏈接到另一個頁面

的jsfiddle：https://jsfiddle.net/e0u4sow1/製作圖像疊加點擊鏈接到另一個頁面

我想用下面的代碼的圖像鏈接到另一個頁面。現在，如果我把它作爲一個鏈接，它不起作用。我在某處閱讀我需要添加的內容

pointer-events: none;

代碼中的某處。它嘗試過，但它不是工作或它的工作，但刪除覆蓋。

HTML：

<h1>MR Cube</h1> 
<div class="media"></div> 
<div class="media"><a href="http://www.google.nl/"><img alt="" class="media__image" src="http://www.webwinkelsucces.nl/wp-content/uploads/2015/05/1112625-les-outils-de-test-et-d-integration-continue-open-source.jpg" /></a> 
<div class="media__body"> 
<h1>Lees meer</h1> 
</div> 
</div>

CSS：

.media { 
    display: inline-block; 
    position: relative; 
    vertical-align: top; 
} 

.media__image { display: block; } 

.media__body { 
    background: rgba(41, 128, 185, 0.7); 
    bottom: 0; 
    color: white; 
    font-size: 1em; 
    left: 0; 
    opacity: 0; 
    overflow: hidden; 
    padding: 3.75em 3em; 
    position: absolute; 
    text-align: center; 
    top: 0; 
    right: 0; 
    -webkit-transition: 0.6s; 
    transition: 0.6s; 
} 

.media__body:hover { opacity: 1; } 

.media__body:after, 
.media__body:before { 
    border: 1px solid rgba(255, 255, 255, 0.7); 
    bottom: 1em; 
    content: ''; 
    left: 1em; 
    opacity: 0; 
    position: absolute; 
    right: 1em; 
    top: 1em; 
    -webkit-transform: scale(1.5); 
    -ms-transform: scale(1.5); 
    transform: scale(1.5); 
    -webkit-transition: 0.6s 0.2s; 
    transition: 0.6s 0.2s; 
} 

.media__body:before { 
    border-bottom: none; 
    border-top: none; 
    left: 2em; 
    right: 2em; 
} 

.media__body:after { 
    border-left: none; 
    border-right: none; 
    bottom: 2em; 
    top: 2em; 
} 

.media__body:hover:after, 
.media__body:hover:before { 
    -webkit-transform: scale(1); 
    -ms-transform: scale(1); 
    transform: scale(1); 
    opacity: 1; 
} 

.media__body h2 { margin-top: 0; } 

.media__body p { margin-bottom: 1.5em; }

來源

2015-12-21 Sjoerd1234

你應該使用'jsfiddle'所以我們可以奧凱我會感謝 –

請考慮萬一upvoting回答他們是有幫助的感激時間和精力的人投資於你的問題 – Sjoerd1234

測試代碼 – Trix

此舉.media__body內a

<a href="http://www.google.nl/"> 
    <img alt="" class="media__image" src="http://www.webwinkelsucces.nl/wp-content/uploads/2015/05/1112625-les-outils-de-test-et-d-integration-continue-open-source.jpg" /> 
    <div class="media__body"> 
     <h1>Lees meer</h1> 
    </div> 
</a>

檢查這個fiddle

來源

2015-12-21 13:38:46 Venugopal

謝謝你，工作 – Sjoerd1234

雖然jQuery有沒有被標記，這就是你可能會用它做：

$(".media__body").click(function(){ 
    window.location = "http://www.google.com/"; 
});

Here is a Demo

來源

2015-12-21 13:38:37

這裏是解決方案，只是包裝用於圖像的所有標記與<a>標籤

Demo

<h1>MR Cube</h1> 
<a href="www.google.com" > 
<div class="media"></div> 
<div class="media"><img alt="" class="media__image" src="http://www.webwinkelsucces.nl/wp-content/uploads/2015/05/1112625-les-outils-de-test-et-d-integration-continue-open-source.jpg" /> 
<div class="media__body"> 
<h1>Lees meer</h1> 
</div> 
</div> 
</a>

來源

2015-12-21 13:41:32

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.image-container{ 
 
    width:200px; 
 
    position:relative; 
 
    overflow: hidden; 
 
} 
 
    
 
.image-container img { 
 
    max-width: 100%; 
 
    height: auto; 
 
    display: block; /* added this */ 
 
    
 
} 
 

 
.image-container a { 
 
    position:absolute; 
 
    color: #fff; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    padding: 0; 
 
    z-index:2; 
 
    
 
} 
 

 
.image-container .image-overlay{ 
 
    opacity:0; 
 
    position:absolute; 
 
    color: #fff; 
 
    background: rgba(141, 178, 215, 0.77); 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    padding: 0; 
 
    text-align:center; 
 
    font-size:40px; 
 
    line-height: 200px; /* added this */ 
 

 
    
 
    -webkit-transition: opacity .5s ease-in-out; 
 
    -moz-transition: opacity .5s ease-in-out; 
 
    -ms-transition: opacity .5s ease-in-out; 
 
    -o-transition: opacity .5s ease-in-out; 
 
    transition: opacity .5s ease-in-out; 
 
    z-index:1; 
 
} 
 

 
.image-container:hover .image-overlay{ 
 
    opacity:1; 
 
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 
 

 
<div class="image-container"> 
 
    <a href="#"></a> 
 
    <div class="image-overlay"> 
 
    <i class="fa fa-search"></i> 
 
    </div> 
 
    <img src="https://placehold.it/350x350"> 
 
</div>

來源

2015-12-21 13:43:02 Trix

製作圖像疊加點擊鏈接到另一個頁面

回答

相關問題