Question

您好我正在根据我的客户要求构建一个wordpress我只需要在帖子的标题上徘徊时才能显示帖子特色图片。到目前为止，我尝试用这种方式通过简单的CSS这样做

li.wpp-thumbnail wpp_cached_thumb wpp_featured
{ 
    display:none;
}

li.wpp-post-title:hover .wpp-thumbnail wpp_cached_thumb wpp_featured 
{
    display:block;
}

但是这并没有成功，你可以通过任何其他过程来帮助我实现这个目标。

Answer 1

如果您尝试从其他元素wpp-thumbnail的事件中更改一个元素li.wpp-post-title:hover的属性，我认为您必须使用Javascript。

您应该将onmouseover="OnMouseIn"附加到li.wpp-post-title元素并在java脚本文件中编写一个函数来处理它。例如：

function OnMouseIn (elememnt) { // find and assign the thumbnail object to a var // make thumbnail visible }

CSS的做法是将缩略图设置为标题图像的背景，使用填充对齐它然后在悬停时显示它。与在悬停时为导航项设置不同背景相同。

Answer 2

在CSS中似乎缺少几个点，并且在未提供HTML时很难看到逻辑。但是，使用CSS实现这一点并不困难。只需确保特色图片包含在带标题的框架中。

示例，关注CSS：

--- HTML ---

<li class="wpp-post-title">
    <h3>title</h3>
    <img class="wpp-thumbnail wpp_cached_thumb wpp_featured" src="[your-ft-img-url]" />
</li>

--- CSS ---

.wpp-post-title .wpp_featured { 
    display:none;
}

.wpp-post-title:hover .wpp_featured {
    display:block;
}

注意：

虽然可能，但不建议添加li。
同样，您不需要添加特色图像的所有类。一个就够了。
如果您因其他原因需要添加所有类，则需要在两者之间添加点而不是空格。

那么，CSS看起来如下：

.wpp-post-title .wpp-thumbnail.wpp_cached_thumb.wpp_featured  { 
    display:none;
}

.wpp-post-title:hover .wpp-thumbnail.wpp_cached_thumb.wpp_featured {
    display:block;
}

我希望有所帮助。 GL！

仅在帖子标题悬停时显示特色图像

2 个答案: