Question

我非常喜欢新手，但我一直想弄清楚如何为Blogger中的热门帖子小部件获取hover effect缩略图。

我有相对较大的缩略图，我希望帖子的标题显示在hover上。

任何人都可以帮我吗？我一直试图在网上找到解决方案，但迄今为止一无所获。

Answer 1

实际上，使用display: block;和none可以很容易地实现以下功能，但是您将无法传输元素，因此，为了传输元素，我们将使用{{隐藏它1}}和opacity: 0;我们将其更改为hover，您可以使用1使background不透明，使用rgba()使其平滑。另外，不要忘记创建父元素transition，因为它包含position: relative;定位的子元素。

我从头开始做了下面的例子，你可以看看......

Demo

absolute

Answer 2

试试这个：

假设你有 Html Markup ，就像这样：

<div class="thumbnail">
    Iam the main content
    <div class="onhover">
        i am onhover content
    </div>
</div>

<强>的CSS：

.thumbnail{
    width:200px;
    height:100px;
    background-color:Red;
}
.thumbnail:hover  .onhover {
    display: block;
}

请参阅demo

所以基本上，你想要的是影响另一个元素（使用某个选择器），当其他元素悬停时，基本语法是：

 sourceSelector:hover  targetSelector{ /*whatever css you want to apply*/}

博客中流行的帖子小部件的悬停效果

2 个答案: