Как изменить цвет переполнения текста: эллипсис, зависящий от него

Question

Может кто-то предложить изменить «точечный цвет текста на мыши» в HTML. Я пытаюсь использовать код ниже, но он не работает. пожалуйста помогите.

Это мой CSS -------------

.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; 
} 

Это мой HTML код -------------

<div class="gvb-theme-carosuleTooltipMargin"> 
<div class="gvb-theme-cpCaroToolTipList"> 
<a href="#"> 
<img src="img/cp_star.png" class="gvb-theme-cpSetStarIcon" > <span>CONTO LA LIBRETTA LIBRETTA</span> 
</a> 
</div> 
</div> 

Answer 1

Try, чтобы добавить этот class так, чтобы добавить пунктирные ниже текст на парении:

.gvb-theme-cpCaroToolTipList span:hover { 
    border-bottom: 1px dotted #ffffff; 
    text-decoration: none; 
} 

Изменения цвета часть в качестве needs.etc: 1px dotted #101010; http://jsfiddle.net/csdtesting/308wakq6/

Answer 2

вам нужно сделать, это:

.gvb-theme-cpCaroToolTipList a:hover { 
    color: #fff; 
    line-height: 30px; 
    padding: 5px 10px; 
    text-decoration: none; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    text-align:center; 
    background-color:#003C72; 
    width:150px; 
    padding:5px 10px; 
} 

Answer 3

Вы должны добавить два следующих:

.gvb-theme-cpCaroToolTipList:hover { 
color:#ffffff; 
} 

.gvb-theme-cpCaroToolTipList:hover > span{ 
color:#ffffff; 
} 

см: http://jsfiddle.net/olivier_royo/s159y4m1/