悬停对IE10的影响

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了悬停对IE10的影响相关的知识,希望对你有一定的参考价值。

我无法理解为什么对div的简单悬停效果在IE10中不起作用。

CSS:

.portfolio {
    margin-bottom: 130px;
    .portfolioContainer {
        display: flex;
        flex-wrap: wrap;
        margin-left: -10px;
        margin-right: -10px;
        .portfolioBox {
            display: flex;
            width: 50%;
            height: 250px;
            padding: 10px;
            .moreBoxInfo {
                display: none;
            }
            .portfolioBoxLogo {
                width: 50%;
                background-color: $lighter_gray;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 5px;
                img {
                    display: block;
                    transform: scale(0.8);
                    max-width: 90%;
                    width: 100%;
                }
            }
            .portfolioBoxImg {
                width: 50%;
                background-position: center;
                background-size: cover;
                position: relative;
                cursor: pointer;
                &:before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: $primary;
                    opacity: 0;
                    transition: opacity .5s;
                    z-index: 1;
                }
                .portfolioBoxText {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    padding: 20px;
                    opacity: 0;
                    transition: opacity .5s;
                    z-index: 2;
                    p {
                        font-size: 16px;
                        line-height: 20px;
                        text-align: left;
                    }
                }
                .more {
                    position: absolute;
                    right: 20px;
                    bottom: 20px;
                    @include fontFamilySize("HelveticaNeueThin", 36px, 42px);
                    cursor: pointer;
                    display: none;
                    z-index: 3;
                }
                &:hover {
                    &:before {
                        opacity: .95;
                    }
                    .portfolioBoxText {
                        opacity: 1;
                    }
                    .more {
                        display: block;
                    }
                }
            }
        }
    }
}

html

<div class="portfolio">
    <div class="portfolioContainer">
        <div class="portfolioBox">
            <div style="background-image: url( img/participadas/forcemanager-img.jpg)" class="portfolioBoxImg">
                <div class="portfolioBoxText"> 
                    <p>Aplicació per accelerar les vendes en equips comercials basada en Intel·ligència Artificial.</p>
                </div>
                <span class="more">+</span>
            </div>
        </div>
    </div>
</div>

此SASS代码编译得非常好。

预期的工作代码应该是当我悬停div.portfilioBoxImg时,:before.more.portfolioBoxText应该获得opacity: 1,但它不会起作用。

我在网站周围有其他的徘徊,它们工作正常,但这个没有。

我尝试摆脱过渡,没有不透明度并添加display none / block,但这些对自己起作用,它不起作用的是悬停效果。

从chrome中提取的编译CSS:

.portfolio .portfolioContainer .portfolioBox .portfolioBoxImg:before

这适用于IE11,Firefox,Chrome ......

的jsfiddle:http://jsfiddle.net/vy5npu3a/

编辑

我尝试用::之前在身体内悬停,但它也不起作用,但它有一个锚a。也许有些元素不起作用?

答案

缺少doctype html。我发誓我以前尝试过没有成功,但似乎现在有效。

以上是关于悬停对IE10的影响的主要内容,如果未能解决你的问题,请参考以下文章

高效Web开发的10个jQuery代码片段

IE选择悬停问题

十条实用的jQuery代码片段

IE10 悬停伪类在没有背景颜色的情况下不起作用

IE8 上的鼠标悬停/悬停效果缓慢

IE9:悬停故障