内容不显示悬停
问题描述:
在我的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; ?> — <?php echo $specifics; ?></p>
</div>
</div>
</a>
<img src="<?php echo $image; ?>">
This is what happens when you hover over the image
林茫然,什么可能导致此它工作时每隔图像精细。用于悬停和箱子
答
就像你正在使用的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>
代替提供构建的标记的逻辑,这是更有利于提供所产生的标记。还包括实际处理悬停的逻辑将非常有帮助。 – Taplar
通常对于CSS问题,您应该为提供的HTML提供CSS代码。你能否为添加的HTML添加样式? – zgood
叠加的CSS已添加。任何想法都非常感谢。 – Buns