css - 分区 :hover issue on IE10

Question

我有一个图标:当我点击它时，另一个隐藏的 div 出现在正上方。但只有当我们将鼠标悬停在图标上时。它在 FF 和 Chrome 上完美运行，但在 IE10 上，当您将 div 悬停在隐藏状态时，它会显示...

这是 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&amp;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/

请问有什么解决办法吗？ :-(

Answer 1

改变

.enveloppe_abo:hover .bulle_abo, .enveloppe_bulaut:hover .combulle{

到

.abo:hover + .bulle_abo, .enveloppe_bulaut:hover .combulle {

Updated jsFiddle

您选择的是整个容器，而不仅仅是图像

重新编辑

您还必须将 display:none 添加到 .bulle_abo 以保留相同的功能。 Updated jsFiddle

.bulle_abo, .combulle {
    // A bunch of lines
    display: none;
    // A bunch more lines
}

另一个编辑

为了重新添加动画，我创建了一个带有浏览器前缀的 CSS3 动画。 Updated jsFiddle

调用它

animation: appear .25s linear forwards;

它的关键帧

@keyframes appear {
    0% {opacity:0; transform: translateY(10px);}
    100% {opacity:1; transform: translateY(0px);}
}