[英]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
,但它不会工作。
我在站点周围还有其他悬停组件,它们工作正常,但事实并非如此。
我尝试摆脱过渡,没有不透明性,并没有显示/阻止显示,但这些显示对自己有效,但悬停效果不起作用。
从chrome提取的已编译CSS:
.portfolio .portfolioContainer .portfolioBox .portfolioBoxImg:before
完美搭配IE11,Firefox,Chrome ...
JSFiddle: http : //jsfiddle.net/vy5npu3a/
编辑
我尝试了体内的悬停与前::,它不工作下去,但有固定a
它。 也许某些元素不起作用?
缺少doctype html。 我可以发誓以前曾经尝试过但没有成功,但是现在看来可以了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.