内容不显示悬停

-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

内容不显示悬停

回答

相关问题