Question

我正在使用css悬停属性上的工具提示基于图像，该页面在IE10，IE11，Chrome和Firefox上工作得很好但在IE8上（尚未在IE9上测试）工具提示巧妙地赢了当鼠标悬停在图像上时显示。

我正在寻找一些关于添加到我的网页中的内容的建议。

CAPSULAS <div id="imgel" class="imgel">
        <div id="imgem" class="imgem">
           <img src="/images/ER.jpg" width="16" height="16" border="0" />
           <span>Valorar relación riesgo/beneficio en el embarazo.</span>
        </div>
        <div id="imgla" class="imgla">
           <img src="/images/LC.jpg" width="16" height="16" border="0" />
           <span>No usar en la lactancia.</span>
        </div>
      </div>

这是css

.imgel {
    display:inline;
    width:60px;
    margin-left:5px;  
    }
.imgem {
    width:19px;
    display:inline;
    position:relative;
    margin-left:4px;
    }  
.imgla {
    width:19px;
    display:inline;
    position:relative;
    margin-left:4px;
    }     
.imgem span {
    visibility:hidden;
    position:absolute;
    left:50px;
    top:-5px;
    background:#F8F8FF;
    /*width:80px;*/
    width:auto;
    height:18px;
    border:1px solid #404040;
    font-size:7pt;
    line-height:160%; 
    vertical-align:middle;
    white-space:nowrap;   
    }  
.imgla span {
    visibility:hidden;
    position:absolute;
    left:30px;
    top:-5px;
    background:#F8F8FF;
    /*width:80px;*/
    width:auto;
    height:18px;
    border:1px solid #404040;
    font-size:7pt;
    line-height:160%;
    vertical-align:middle;
    white-space:nowrap;
    } 
.imgem:hover span {
    visibility:visible;
    }
.imgla:hover span {
    visibility:visible;
    }

问候

Answer 1

而不是使用visibility:hidden 使用 display:none

然后显示它使用display:inline-block

应该适用于ei8 / 9及以上

Answer 2

刚刚找到了这个答案：

Title tooltip is not shown when span is child of anchor

我应用了DOCTYPE标题，但它确实有效。

使用悬停的我的css工具提示在IE8上不起作用

2 个答案: