title: How to change color of text-overflow: ellipsis by hovering it
body: <p>Can someone suggest to change "dotted text color on mouse over" in HTML. I am trying with below code but it didn't work. please help me.</p>
  
  <p>This is my css-------------</p>
  
  <pre><code>.gvb-theme-cpCaroToolTipList {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 150px;
  /*  color:#ffffff;*/
  }
  
  .gvb-theme-cpCaroToolTipList a {
      color: #003c72;
      line-height: 30px;
      padding: 5px 10px;
      text-decoration: none;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
  .gvb-theme-cpCaroToolTipList a:hover {
      color:#ffffff;
      text-align:center;
      background-color:#003C72;
      width:150px;
      padding:5px 10px;
  }
  </code></pre>
  
  <p>This is my HTML code-------------</p>
  
  <pre><code>&lt;div class="gvb-theme-carosuleTooltipMargin"&gt;
  &lt;div class="gvb-theme-cpCaroToolTipList"&gt;
  &lt;a href="#"&gt;
  &lt;img src="img/cp_star.png" class="gvb-theme-cpSetStarIcon" &gt; &lt;span&gt;CONTO LA LIBRETTA LIBRETTA&lt;/span&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>