0
У меня есть значок: когда я нажимаю на него, другой div, который был скрыт, появляется только вверх. Но только когда мы наводим иконку. Он отлично работает на FF и Chrome, но на IE10, при наведении ДИВ скрытый, он делает вид ...div: ошибка на IE10
Вот HTML:
<div class="enveloppe_abo" id="enveloppeabo_92">
<li class="abo">
<img src="/images/avatars/femme.gif" class="avatar_40">
</li>
<div class="bulle_abo">
<div class="avatar_abo_bulle">
<img src="/images/avatars/femme.gif" width="68" height="68">
</div>
<div class="supprabo" id="supprabo_92" alt="Remove subscription" title="Remove subscription"></div>
<div class="texte_abo_bulle"><a href="http://steph.toto.com" target="_blank" class="lien_bulle">steph.toto.com</a>
<br>
<br>Blog de blog blalala et oui de deux trois et quatre informations
<br>Encore une info et oui bien s&ucir...</div>
</div>
</div>
И CSS:
.avatar_abo_bulle{
float: left;
position: relative;
height: 68px;
width: 68px;
display: block;
overflow: hidden;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
box-shadow: 0px 0px 8px 1px #000;
-webkit-box-shadow: 0px 0px 8px 1px rgba(0,0,0, 1);
-moz-box-shadow: 0px 0px 8px 1px rgba(0,0,0, 1);
}
.texte_abo_bulle{
margin-left: 90px;
-webkit-font-smoothing: antialiased;
font-size: 14px;
}
.enveloppe_abo {
position: relative;
float: left;
display: block;
-webkit-transform: translateZ(0);
-webkit-font-smoothing: antialiased;
z-index:11;
}
.enveloppe_bulaut {
position: relative;
-webkit-transform: translateZ(0);
-webkit-font-smoothing: antialiased;
}
.bulle_abo, .combulle {
border: 1px solid #909090;
bottom: 100%;
color: #fff;
display: block;
left: -114px;
margin-bottom: 15px;
opacity: 0;
padding: 20px;
pointer-events: none;
position: absolute;
min-width: 250px;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
-moz-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
-ms-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
-o-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #c9c9c9 2%, #606060 53%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(2%,#c9c9c9), color-stop(53%,#606060)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#c9c9c9 2%,#606060 53%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#c9c9c9 2%,#606060 53%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#c9c9c9 2%,#606060 53%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#c9c9c9 2%,#606060 53%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#606060',GradientType=0); /* IE6-9 */
}
.bulle_abo{
min-height: 90px;
}
.combulle{
margin-left: -36px;
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.bulle_abo:before, .combulle:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
/* CSS Triangles - see Trevor's post */
.bulle_abo:after, .combulle:after {
background: url(/themes/glace_et_ombre/images/flbas.png) no-repeat;
bottom: -20px;
content: " ";
height: 20px;
left: 144px;
margin-left: -13px;
position: absolute;
width: 20px;
}
.enveloppe_abo:hover .bulle_abo, .enveloppe_bulaut:hover .combulle{
min-height: 90px;
opacity: 0.95;
display:block;
pointer-events: auto;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
/* IE can just show/hide with no transition */
.lte8 .enveloppe_abo .bulle_abo, lte8 .enveloppe_bulaut .combulle{
display: none;
}
.lte8 .enveloppe_abo .bulle_abo, lte8 .enveloppe_bulaut .combulle {
display: block;
}
a.lien_bulle:link, a.lien_bulle:active, a.lien_bulle:visited {
color: rgb(0, 78, 194);
text-shadow: 0 1px 3px rgb(255, 255, 255);
font-size: 18px;
-o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
transition:.3s;
}
a.lien_bulle:hover {
color: rgb(228, 235, 255);
text-shadow: 0 1px 0 #000;
}
Демонстрация: http://jsfiddle.net/YRwCt/
Любое решение для этого, пожалуйста? . :-(работает
Насколько я могу сказать, скрипка работает так же в IE10, как это делает в Chrome - окно всплывает для обоих из них – Spudley
Проблема в том, что popover активируется на слишком большой площади в IE10. – isherwood
Да, и IE, и Chrome - это всплывающее окно, это не проблема. Проблема в том, что если вы наведите указатель мыши на скрытый div, он появится. Попытайтесь поместить курсор мыши на 100 пикселей вверх, а в IE он появится в div, в Chrome нет. Он не должен появляться, если мы поместим мышь в другое место. – user2670167