Question

我需要一些帮助来了解为什么会发生这种情况。

基本上，我刚刚启动了一个新的投资组合网站。一切都可以在Chrome，Safari和FireFox上完美运行。但是它在MS Edge（典型）上无法正常工作。

我的问题是，在网站的“投资组合”部分，我的图像位于网格中，每个图像都处于悬停状态，因此当鼠标光标悬停在图像上时，会显示标题和简短说明。但是，在MS Edge上，所有悬停状态均已触发，因此所有叠加层均已显示。我不知道为什么！这是代码：

HTML

        <div class="box box-1">

            <a href="<?php the_field('box-1'); ?>">
                <div class="content">

                    <img src="<?php the_field('box-1-image'); ?>" width="102%" height="102%">

                    <div class="overlay">
                        <h1 class="image-title"><?php the_field('box-1-client'); ?></h2>
                        <h2 class="image-description"><?php the_field('box-1-project'); ?></h1>
                        <div class="overlay-bg"></div>
                    </div>

                </div>
            </a>

        </div>

CSS

.image-title {
z-index: 2;
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 32px;
position: absolute;
bottom: 20px;
left: 10%;

transition: .4s ease;
-o-transition: .4s ease;
-ms-transition: .4s ease;
-moz-transition: .4s ease;
-webkit-transition: .4s ease;
}

.box:hover .image-title {
bottom: 40px;
transition: .4s ease;
-o-transition: .4s ease;
-ms-transition: .4s ease;
-moz-transition: .4s ease;
-webkit-transition: .4s ease;
}

.image-description {
opacity: 0;
z-index: 2;
color: white;
font-family: "Open Sans", sans-serif;
font-weight: 300;
font-size: 18px;
position: absolute;
bottom: 25px;
left: 10%;

-webkit-transition-duration: .4s; /* Safari */
transition: .4s;
-o-transition: .4s;
-ms-transition: .4s;
-moz-transition: .4s;
-webkit-transition: .4s;
}

.box:hover .image-description {
opacity: 1;
bottom: 35px;
-webkit-transition-duration: .4s; /* Safari */
-webkit-transition-delay: .2s; /* Safari */
transition: .4s;
-o-transition: .4s;
-ms-transition: .4s;
-moz-transition: .4s;
-webkit-transition: .4s;
transition-delay: .2s;
-o-transition-delay: .2s;
-ms-transition-delay: .2s;
-moz-transition-delay: .2s;
}

.overlay {
opacity: 0;
transition: 0.4s ease;
-o-transition: 0.4s ease;
-ms-transition: 0.4s ease;
-moz-transition: 0.4s ease;
-webkit-transition: 0.4s ease;
}

.box:hover .overlay {
opacity: 1;
transition: 0.4s ease;
-o-transition: 0.4s ease;
-ms-transition: 0.4s ease;
-moz-transition: 0.4s ease;
-webkit-transition: 0.4s ease;
}

.box img {
transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
-moz-transition: 0.4s;
-webkit-transition: 0.4s;
}

.box:hover img {
transform: scale(1.03,1.03)!important;
transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
-moz-transition: 0.4s;
-webkit-transition: 0.4s;
}

.overlay-bg {
opacity: 0.85;
position: absolute;
bottom: 0;
left: -1px;
right: 0;
background: linear-gradient(#250E3F, #ED306F);
overflow: hidden;
width: 101%;
height: 100%;
}

这是我正在谈论的页面：

http://www.alexkiersnowski.com/portfolio/

全力以赴！

MS Edge触发：页面加载时悬停状态

0 个答案: