Question

我在site的li元素上使用工具提示（现在只有钢铁侠才有）。

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

这里是代码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;
        }

Answer 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 File

仅在悬停单词时限制工具提示显示

1 个答案: