我不知道为什么,但是:hover不能在我的代码中的Firefox中工作。即使在IE中,它也能在Chrome和Safari中完美运行。

我也尝试过.over,但是什么都没有改变。

html代码:

<div id="proekti">
        <article id="red1" class="sliki">
            <span>
                <div class="text">
                <h3></h3>
                </div>
            </span>
            <div></div>

            <span>
                <div class="text">
                <h3></h3>
                </div>
            </span>
           <div></div>

            <span>
                <div class="text">
                <h3></h3>
                </div>
            </span>
            <div></div>

            <span>
                <div class="text">
                <h3></h3>
                </div>
            </span>
            <div></div>
        </article>
</div>

CSS代码:

#proekti .sliki > div {
    width:25%;
    display:inline;
    float:left;
    position:relative;
    border:0;
    margin:0;
    padding:0;
    overflow:hidden;
}

article.sliki > span {
    width:25%;
    height:100%;
    display:inline-block;
    position:absolute;
    border:0;
    margin:0;
    padding:0;
    overflow:hidden;
    background: rgba(55,55,55,0.6);
    color:#FFF;
    opacity:0;
    z-index:1000;
}

article.sliki > span:hover {
    transition:all 1s ease-out;
    -webkit-transition:all 1s ease-out;
    -moz-transition:all 1s ease-out;
    -o-transition:all 1s ease-out;
    opacity:1;
}

===============>>#1 票数:1

您的代码是错误的。 SPAN是一个INLINE元素,但是您在其中放置了DIV(块元素)。 这是无效的。 您只能在另一个内联元素中使用内联元素。

这不是一个好的解决方案,但如果您将{display:block;}属性添加到span,:hover将为您工作(article.sliki> span)。

  ask by mALEFACTOr translate from so

未解决问题?本站智能推荐:

1回复

更改一个div的不透明度,并将鼠标悬停在另一个div上

我想在将div悬停在另一个div上时缓慢地更改div的不透明度。 将鼠标悬停在另一个div上时,可以更改div的不透明度,但是问题是我不知道如何缓慢地进行过渡。 我的代码如下所示: #my-id:hover ~ #info .hc { display: block;
2回复

不透明度转换在Firefox和IE(及其他?)中不起作用

对于我自己的网站,我向访问者展示了几张照片。 这些图片应具有opacity: 0.7; 然后使用transition: opacity 0.50s ease-in-out;悬停在它们上方时transition: opacity 0.50s ease-in-out; 图像应具有100%的可见
1回复

:hover在Firefox中不起作用

希望有人可以帮助我解决这个问题。 :hover在Firefox中不起作用。 在谷歌浏览器,Safari和IE中,IE都可以正常工作。 在IE中,动画至少有效,但效果不佳。 我知道如何用jQuery解决它不是解决方案。 谢谢 HTML: CSS: 预览: h
3回复

为什么我的不透明度转换时间(CSS)不起作用? CSS块中的其他所有内容都有效吗?

我设置了一个导航菜单,因此子菜单出现在悬停上(通过更改不透明度)。 您可以在此处查看该站点。 我遇到的问题是,我希望缓慢的淡入(1.4秒),但是淡入中断了,子菜单现在立即出现,这很刺耳。 相关代码在下面,或者您可以在此处查看GitHub存储库。 非常感谢您的帮助,如果您需要更多信
3回复

CSS:在悬停时替换文本,但平滑过渡到新文本不起作用?

场景: 如果用户将鼠标悬停在文本上(例如h1标签),则应将其更改为新文本。 新文本应该很顺利。 到目前为止我做了什么: 我能够使用“display:none”和“content:'这是新文本'-property来替换带有新文本的文本。 我的问题是新文本没有顺利出现(它没有淡
2回复

不透明的CSS过渡不起作用

标题中已经说明了我的问题。 我想我做的一切正确。 但是,过渡效果不会出现。 请注意,实际上出现了悬停效果,并且出现了h5标签内的书写,但是没有过渡效果。 这让我发疯,任何建议将不胜感激。 a.jobBoxLink { color: #B2B2B2; -moz-box-sh
1回复

伪元素的过渡:after和:be不起作用

我知道以前有人问过这个问题,但是我有一个特定的问题,我似乎无法将其与其他问题中回答的解决方案一起使用。 我有一个缩略图,并在其上方有一个:after播放图标,仅在悬停时显示它是视频,但是不透明度过渡仅对图像不起作用。 有人知道解决方案吗? 这里的小提琴
3回复

图标悬停减少过渡

悬停时,我使用过渡来平滑图标增加。 但是问题是,当我将鼠标拖出图标时,它会立即恢复正常大小。 我不确定如何减少图标的数量。 我的意思是,当我将鼠标拖出图标时,它应该以相同的平滑过渡(而非即时)达到正常大小。 我希望你能理解我。 这是我的代码: li { display:
4回复

修改CSS悬停超链接效果

我需要修改链接上的css悬停效果。 这是我的HTML代码: 因此,css效果可在链接背景下使用。 如何修改CSS,以将“用颜色填充”的相同效果应用于文本颜色而不是背景? http://jsfiddle.net/yakovenkodenis/ryfyhLk7/这是所需的效果,但它会更
1回复

CSS3菜单展开,悬停时消失

我已经在CSS3中制作了一个带有过渡的菜单,但是问题是当我试图将鼠标悬停在它们上面时,展开的按钮会消失,因为仅在Mainmenu DIV上设置了过渡。 我可以帮忙! 这是我的jsfiddle: http : //jsfiddle.net/7zn2D/ 这是我的代码: