1

几天来，我一直在努力寻找一个好的、简单的解决方案，但我空手而归。

我正在尝试在 wordpress 中创建一个博客，该博客目前在首页上有图片摘录。这些图片不是特色图片，它们链接到完整的帖子。我真正想要的是当我将鼠标悬停在首页上的帖子图像上时出现“阅读更多”。

理想情况下，如果可能的话，我很想在帖子图像上实现这些 codrops 悬停效果之一（ http://tympanus.net/Development/HoverEffectIdeas/ ）。我是wordpress的新手，所以我不知道在哪里放什么代码。

但任何帮助将不胜感激。

4

2 回答 2

1

试试下面的 HTML 和 CSS 核心代码：

<style type="text/css">
div.texthover 
{   
    display:block;
    position:relative; 
    width:150px;
}

div.texthover .overlay 
{
    position:absolute;
    top:45%;
    width:100;
    width:150px;       
    background-color:rgba(0, 0, 0, 0.3);
    display:none;width:150px;
}
div.texthover:hover .overlay 
{
    display:block;
}
</style>


<div class="texthover"><br />
    <img src="image.jpg" width="150" height="150" />
<div class="overlay"><br />
    <span>This is some text I want to display</span>
</div>
</div>
于 2015-05-26T09:21:36.830 回答
0

在 WordPress 中，转到外观 -> 编辑器并编辑 style.css 或您的主 .css 主题文件。您可以将悬停代码放在那里。您还需要将相应的类添加到您的图像中。但是，如果您希望“阅读更多”出现，您将需要现有的关联 HTML 代码。另一方面，您有一些可用的悬停插件，我通过快速搜索找到了这个：https ://wordpress.org/plugins/amazing-hover-effects/ 祝你好运。

于 2015-05-26T08:55:19.360 回答