CSS懸停不能正常工作

Question

我有一些CSS懸停問題，我做錯了什麼？

我試圖實現，當我把鼠標懸停在圖像上，透明div與其中的鏈接覆蓋它，所以你可以點擊它，並轉到另一個頁面。 類似於此頁面上的東西http://sputniknews.com/當鼠標懸停在新聞上時

當我將鼠標懸停在圖片上時，標記已停用並且懸停顯示不正確。 與此滯留改變代碼很多次了，不知道該怎麼辦

.cvr:hover { 
 
    background-color: rgba(0, 0, 0, 0.600); 
 
    height: inherit; 
 
    width: inherit; 
 
    float: left; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    visibility: visible; 
 
} 
 
.link { 
 
    word-break: normal; 
 
    word-wrap: break-word; 
 
    display: block; 
 
    height: inherit; 
 
    width: inherit; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    color: aliceblue; 
 
    visibility: hidden; 
 
} 
 
.cvr:hover>.link { 
 
    visibility: visible; 
 
} 
 
.img { 
 
    width: inherit; 
 
    height: inherit; 
 
} 
 
.clear { 
 
    clear: both; 
 
}

<div class="person"> 
 
    <img class="img" src="http://www.gene-quantification.de/logo-img-cz.png"> 
 
    <div class="cvr"> 
 
    <a class="link" href="#"> link text is here</a> 
 
    </div> 
 
</div> 
 
<div class="person"> 
 
    <img class="img" src="http://www.gene-quantification.de/logo-img-cz.png"> 
 
    <div class="cvr"> 
 
    <a class="link" href="#"> link text is here</a> 
 
    </div> 
 
</div> 
 
<div class="clear"></div>

Answer 1

您需要的:hover僞選擇適用於您，希望有此狀態期間出現的元素的父。

當前，您已將它應用於.cvr，您需要在包含父元素的元素上聲明該規則;這是.person。

.cvr { 
 
    background-color: rgba(0, 0, 0, 0.600); 
 
    height: 100%; 
 
    width: inherit; 
 
    float: left; 
 
    position: absolute; 
 
    left: 0px; 
 
    transition: .7s; 
 
    right: 0px; 
 
    opacity: 0; 
 
    bottom: -500px; 
 
    visibility: visible; 
 
} 
 
.link { 
 
    word-break: normal; 
 
    word-wrap: break-word; 
 
    display: block; 
 
    height: inherit; 
 
    width: inherit; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    color: aliceblue; 
 
} 
 
.img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.clear { 
 
    clear: both; 
 
} 
 
.person:hover .cvr { 
 
    bottom: 0px; 
 
    opacity: 1; 
 
} 
 
.person { 
 
    display: inline-block; 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: auto; 
 
}

<div class="person"> 
 
    <img class="img" src="http://www.gene-quantification.de/logo-img-cz.png"> 
 
    <div class="cvr"> 
 
    <a class="link" href="#"> link text is here</a> 
 
    </div> 
 
</div> 
 
<div class="person"> 
 
    <img class="img" src="http://www.gene-quantification.de/logo-img-cz.png"> 
 
    <div class="cvr"> 
 
    <a class="link" href="#"> link text is here</a> 
 
    </div> 
 
</div> 
 
<div class="clear"></div>

Answer 2

有多種方式來實現這一目標。 我建議你在你的容器上使用一個相對位置，並在你的鏈接容器上絕對定位。您可以使用RGBA顏色與透明度也發揮：

background-color: rgba(0,0,0,0); 

前三個值代表RGB顏色代碼，最後表示0不透明度爲1

我稍微改變了你的HTML等等你上課對他們的功能更具代表性。 這裏有一個演示：https://jsfiddle.net/ecpb6tre

Answer 3

你想要做的是補充一點：

.cvr { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

然後，添加：

.person { 
    position: relative; 
} 

這部作品的原因是，絕對定位是相對於要素第一個擁有顯式聲明的position屬性的父級。由於.person類沒有聲明位置，因此在子元素上放置位置：絕對值假定您的意思是將其相對於頁面放置。

Answer 4

請嘗試此代碼，它的工作原理。

<style> 
.person { position:relative; width:50%; } 
.person .cvr { display:none; background-color: rgba(0, 0, 0, 0.600); height: 100%; width: 100%; position: absolute; left: 0px; top: 0px; visibility: visible; } 
.person:hover .cvr { display:block; } 
.person img { width:100%; } 
.person .textdiv { display:table; height: 100%; width: 100%; } 
.person .cvr a { display: table-cell; text-align: center; text-decoration: none; color: aliceblue; vertical-align: middle; } 
</style> 

<div class="person"> 
    <img class="img" src="http://www.gene-quantification.de/logo-img-cz.png"> 
    <div class="cvr"> 
    <div class="textdiv"><a class="link" href="#"> link text is here</a></div> 
    </div> 
</div> 

<div class="person"> 
    <img class="img" src="http://www.gene-quantification.de/logo-img-cz.png"> 
    <div class="cvr"> 
    <div class="textdiv"><a class="link" href="#"> link text is here</a></div> 
    </div> 
</div>