悬停对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的影响的主要内容,如果未能解决你的问题,请参考以下文章