div:hover issue on IE10

Question

I have an icon: when I click on it, an other div, which was hidden, appears just upside. But only when we hover the icon. It works perfectly on FF and Chrome, but on IE10, when you hover the div hidden, it makes it appear...

Here is the 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>

And the 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;
}

The demo: http://jsfiddle.net/YRwCt/

Any solution for this please? :-(

Answer 1

Change

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

To

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

Updated jsFiddle

You were selecting the entire container, not just the image

Re-Edit

You must also add display:none to .bulle_abo to retain the same functionality. Updated jsFiddle

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

Another Edit

To add the animation back I created a CSS3 animation along with browser prefixes. Updated jsFiddle

To call it

animation: appear .25s linear forwards;

The keyframes for it

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

Answer 2

The Fiddle works. Maybe you have to add the doctype at the beginning of your code:

<!DOCTYPE html>