只显示悬停的职位标题

嗨我建立一个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; 
}

但这并没有成为窍门，你可以帮助我通过任何其他过程，以提前感谢实现这一点。

来源

2015-02-23 dh47

“.wpp-thumbnail wpp_cached_thumb wpp_featured”这是一个单一的类名吗？ – PRAH 2015-02-23 06:02:15

是的，它属于单一类 – dh47 2015-02-23 06:54:23

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

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

这样做会被设置缩略图作为标题的图像的背景，使用填充对齐，然后悬停显示它的CSS方式。与为悬停上的导航项目设置不同背景相同。

来源

2015-02-23 06:02:31 bidhan

在你的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！

来源

2015-02-23 07:50:02 ECO13

只显示悬停的职位标题

回答

相关问题