Question

当我将鼠标光标放在单词上时，工具提示必须显示在上方。它适用于所有浏览器。但是在IE（v10）中，当你将鼠标光标放在div工具提示（隐藏）上时，会出现工具提示！我该怎么办呢？

代码：

<envelop class="enveloppe_bulaut"><aut class="comtip">clickme</aut><bulaut class="combulle"><div class="avatar_abo_bulle">toto</div><div class="texte_abo_bulle">tototototototo</div></bulaut></envelop>

和css：

* {
    outline: none;
}
body{
    background: #000 url(/themes/glace_et_ombre/images/bodybg.gif) repeat-y top center;
    font-family: "Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
    font-size: 16px;
    text-shadow: 0 1px 0 #000;
    color: #ccc;
    -webkit-font-smoothing: antialiased;
}

div {
display: block;
}

.enveloppe_abo {
  position: relative;
  float: left;
  display: block;
  -webkit-transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
}
.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 */
}
.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{
  opacity: 0.95;
  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;
}

Answer 1

好的，找到了解决方案：

.comtip:hover ~ .combulle{
    opacity: 0.95;
}

Div与IE10相比其他浏览器

1 个答案: