內容不顯示懸停

-3

在我的WordPress的網站上，我有不同的圖像顯示，鏈接到不同的職位，當你把鼠標懸停在圖像上的綠色框覆蓋圖像和白色文本（關於職位信息）顯示在框中。出於某種原因，這隻適用於6/7的圖像。需要顯示的信息正在從數據庫中正確提取，但出於某種原因，它只是沒有被顯示。這是使用的PHP模板什麼即時顯示圖像和信息：內容不顯示懸停

<a href="<?php echo $link; ?>"> 
<div id="home-overlay-outer"> 
    <div class="home-overlay"> 
     <h1><?php echo $title; ?></h1> 
     <p><?php echo $location; ?> &mdash; <?php echo $specifics; ?></p> 
    </div> 
</div> 
</a> 
<img src="<?php echo $image; ?>">

This is what happens when you hover over the image

林茫然，什麼可能導致此它工作時每隔圖像精細。用於懸停和箱子

CSS：https://jsfiddle.net/5w3svfoc/

來源

2017-07-27 Buns

代替提供構建的標記的邏輯，這是更有利於提供所產生的標記。還包括實際處理懸停的邏輯將非常有幫助。 – Taplar

通常對於CSS問題，您應該爲提供的HTML提供CSS代碼。你能否爲添加的HTML添加樣式？ – zgood

疊加的CSS已添加。任何想法都非常感謝。 – Buns

就像你正在使用的ID作爲選擇這個在我看來。在這種情況下，您應該使用基於類的選擇器。這可能解釋6/7問題。另外，你不應該在display: none;的元素上有:hover選擇器。考慮將懸停選擇器放在父級上，並確保它具有寬度和高度。根據懸停選擇器切換內容顯示，但不是懸停元素本身。

.hover-images .image { 
 
    width: 50%; 
 
    float: left; 
 
    height: 200px; 
 
} 
 

 
.hover-images .hover-content { 
 
    display: none; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: black; 
 
} 
 
.hover-images .hover-show-content:hover .hover-content { 
 
    display: block; 
 
}

<div class="hover-images"> 
 
    <div id="hover1" class="image hover-show-content"> 
 
    <div class="hover-content"></div> 
 
    </div> 
 
    <div id="hover2" class="image hover-show-content"> 
 
    <div class="hover-content"></div> 
 
    </div> 
 
</div>

來源

2017-07-27 19:10:51

內容不顯示懸停

回答

相關問題