限制工具提示顯示時懸停字只

Question

我在我的site李元素（現在只有鋼人有它）使用工具提示。

但是，當我懸停灰色區域時，工具提示將立即顯示。我試圖讓它出現，只有當我徘徊這個詞。可能嗎 ？

這裏對代碼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