0

我在我网站的 li 元素上使用了工具提示（目前只有 Steel Man 拥有它）。

但是当我将鼠标悬停在灰色区域时，工具提示会立即显示。我试图让它只在我悬停这个词时出现。可能吗 ？

这里是代码 HTML：

   <ol class="rounded-list">
                    <li><a href="#" class="tooltip">Steel Man<em><img class="floatLeft" src="images/F9979.jpg" alt="" /><span></span>
                               TITRE DU FILM : Man of Steel                     <br />                                             <br />                                             RESUME : Film fantastique américain réalisé par Zack Snyder avec Henry Cavill, Amy Adams, Diane Lane                     <br />                                             <br />                                             DUREE : 2H23                     <br />                                             Un petit garçon découvre qu'il possède des pouvoirs surnaturels et qu'il n'est pas né sur la Terre. Plus tard, il s'engage dans un périple afin de comprendre d'où il vient et pourquoi il a été envoyé sur notre planète. Mais il devra devenir un héros s'il veut sauver le monde de la destruction totale et incarner l'espoir pour toute l'humanité...
                     </em></a></li>
                    <li><a href="#">Spiderman</a></li>
                    <li><a href="#">Pokemon</a></li>
                    <li><a href="#">X men</a></li>
                   <li><a href="#">Blanche Neige</a></li>
      </ol>

以及工具提示的 CSS 代码：

        a.tooltip {
            color: #FFFFFF;
            text-decoration: none;
            /*text-align:left*/
        }

        a.tooltip em {
            display:none;
        }
        a.tooltip:hover {
            border: 0;
            position: relative;
            z-index: 500;
            text-decoration:none;
        }
        a.tooltip:hover em {
            font-style: normal;
            font-family: MS Courier New;
            font-size:  17px;
            display: block;
            position: absolute;
            top: 60px;
            left: 0px;
            padding: 5px;
            color: #fff;
            /*border: 1px solid #642B89;*/
            /*background: #40195A;*/
            background-color:rgba(100,43,137,0.9);
            width:450px;
            box-shadow: 0 0 7px 2px #642B89;
        }
4

1 回答 1

1

尝试这个

css

.rounded-list li {
    background: none repeat scroll 0 0 #DDDDDD;
    border-radius: 0.3em 0.3em 0.3em 0.3em;
    color: #444444;
    display: block;
    margin: 0.5em 0;
    padding: 0.4em 0.4em 0.4em 2em;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
}
.rounded-list li:before {
    background: none repeat scroll 0 0 #87CEEB;
    border: 0.3em solid #FFFFFF;
    border-radius: 2em 2em 2em 2em;
    content: counter(li, decimal);
    counter-increment: li;
    font-weight: bold;
    height: 2em;
    left: -1.3em;
    line-height: 2em;
    margin-top: -1.3em;
    position: absolute;
    text-align: center;
    top: 50%;
    transition: all 0.3s ease-out 0s;
    width: 2em;
}

jsFiddle 文件

于 2013-07-15T05:04:58.030 回答