How to change color of text-overflow: ellipsis by hovering it

Question

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.

This is my 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;
}

This is my HTML code-------------

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

Your colour is white after hovering. Which colour should it have? — ohboy21, Oct 07 '14 at 13:45
dotted text-color?? or dotted border underneath text upon hover? — Sudheer, Oct 07 '14 at 13:53
@user3876771 you should try googling your question before just asking it. Duplicate of http://stackoverflow.com/questions/15252597/how-to-add-a-dotted-underline-beneath-html-text as such, this question should be closed. — Mike, Oct 07 '14 at 13:56
No, he wants to use text-overflow: ellipsis. Its a different topic. — ohboy21, Oct 07 '14 at 14:03

Giannis Grivas · Answer 1 · 2014-10-07T14:02:37.257

0

Try to add this class so as to add dotted below the text on hover :

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

Change the color part as your needs.etc: 1px dotted #101010; http://jsfiddle.net/csdtesting/308wakq6/

edited Oct 07 '14 at 14:02

answered Oct 07 '14 at 13:51

Giannis Grivas

3,374
1
18
38

But then he/she has to hover over the text to make it underlined. – ohboy21 Oct 07 '14 at 14:00
Can someone suggest to change "dotted text color on mouse over" – Giannis Grivas Oct 07 '14 at 14:01

Olivier Royo · Answer 2 · 2017-11-01T09:22:42.470

0

You need to add the two following:

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

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

see: http://jsfiddle.net/olivier_royo/s159y4m1/

edited Nov 01 '17 at 09:22

answered Oct 31 '17 at 15:09

Olivier Royo

810
10
13

yossi · Answer 3 · 2014-10-07T15:02:22.723

-1

you need to do this:

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

edited Oct 07 '14 at 15:02

answered Oct 07 '14 at 14:01

yossi

1
4

How to change color of text-overflow: ellipsis by hovering it

3 Answers3