Я не могу понять, почему простой эффект наведения на 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/
EDIT
Я пытался навести курсор в теле с помощью :: before, и он тоже не работает, но с якорем a
это работает. Может быть, некоторые элементы не работают?