溢出不会在悬停时起作用

时间:2013-05-04 13:21:40

标签: css css3 overflow

我想在特定的框中放置一个图像,标题,一些文字,并且该框将被舍入。该框具有背景颜色,RGBA颜色具有不透明度。当盒子悬停时,溢出不起作用。我有以下html结构:

<article id="post-181" class="post-181 post type-post status-publish format-standard hentry category-uncategorized">
    <header class="entry-header">
        <h2 class="entry-title"><a href="#">A PARADISEMATIC COUNTRY</a></h2>
        <div class="post-info">
            <p>Posted by <a href="#">admin</a> on April 25, 2013</p>
        </div>
    </header>
    <div class="entry-content">
        <img width="270" height="208" src="http://roi.me/files/google-vs.-bing.jpg" class="alignright wp-post-image" alt="logos mini">
    </div><!-- .entry-content -->
</article>

和css是:

.post { 
margin-top: 20px; margin-left: 20px; width: 270px; height: 270px; margin-right: 30px; background: rgba(49, 187, 183, 0.5); border-radius: 50%; cursor: pointer; overflow: hidden; position: relative; -webkit-transition: .5s ease background;
}

.post .entry-content img {
position: absolute; top: 0; left: 0; min-height: 270px; min-width: 270px; margin: 0; z-index: -100; border: 1px solid red;
}

.post:hover {
background: rgba(49, 187, 183, 1);
}

我已经上传到jsfiddle:

Demo fiddle

注意:我尝试过使用firefox和chrome。 Firefox显示效果不错,但Chrome不能!

请帮帮我。提前谢谢。

1 个答案:

答案 0 :(得分:1)

看看这个教程:

HOVER AND CLICK TRIGGER FOR CIRCULAR ELEMENTS WITH JQUERY

以下是DEMO

但是,您必须使用一些jQuery才能使其正常工作。

希望有所帮助


修改

如果您不想使用jQuery,请查看本教程:

CIRCLE HOVER EFFECTS WITH CSS TRANSITIONS

请参阅DEMO

这样你就不需要jQuery或JS,只需要CSS3过渡。

现在我认为这就是你想要的。

让我知道它是否有效。