IE10 上的悬停效果
Hover effect on 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
,但是它不行。
我在网站周围还有其他鼠标悬停,它们工作正常,但这个不行。
我尝试摆脱过渡,不透明度和添加显示 none/block,但这些对它们自己起作用,它不起作用的是悬停效果。
编译 CSS 从 chrome 提取:
.portfolio .portfolioContainer .portfolioBox .portfolioBoxImg:before
这在 IE11、Firefox、chrome...
上完美运行
JSFiddle:http://jsfiddle.net/vy5npu3a/
编辑
我尝试使用 ::before 在主体内悬停,但它也不起作用,但使用锚点 a
它可以。也许某些元素不起作用?
缺少文档类型 html。我可以发誓我以前尝试过但没有成功,但现在看来可以了。
我不明白为什么 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
,但是它不行。
我在网站周围还有其他鼠标悬停,它们工作正常,但这个不行。
我尝试摆脱过渡,不透明度和添加显示 none/block,但这些对它们自己起作用,它不起作用的是悬停效果。
编译 CSS 从 chrome 提取:
.portfolio .portfolioContainer .portfolioBox .portfolioBoxImg:before
这在 IE11、Firefox、chrome...
上完美运行JSFiddle:http://jsfiddle.net/vy5npu3a/
编辑
我尝试使用 ::before 在主体内悬停,但它也不起作用,但使用锚点 a
它可以。也许某些元素不起作用?
缺少文档类型 html。我可以发誓我以前尝试过但没有成功,但现在看来可以了。