如何更改文本溢出的颜色：悬停省略号答案

【问题标题】：How to change color of text-overflow: ellipsis by hovering it如何更改文本溢出的颜色：悬停省略号
【发布时间】：2014-12-01 23:14:03
【问题描述】：

有人可以建议在 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>

【问题讨论】：

悬停后你的颜色是白色的。它应该有什么颜色？
什么是“虚线文字颜色”？
你到底想要什么
@user3876771 你应该在问问题之前尝试谷歌搜索。与stackoverflow.com/questions/15252597/… 相同，此问题应关闭。
不，他想使用文本溢出：省略号。这是一个不同的主题。

标签： html css

【解决方案1】：

尝试添加这个class，以便在悬停时在文本下方添加虚线：

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

根据需要更改颜色部分。等：1px dotted #101010; http://jsfiddle.net/csdtesting/308wakq6/

【讨论】：

但是他/她必须将鼠标悬停在文本上才能使其加下划线。
有人可以建议更改“鼠标悬停时的虚线文本颜色”

【解决方案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;
}

【讨论】：

【解决方案3】：

你需要添加以下两个：

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

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

见： http://jsfiddle.net/olivier_royo/s159y4m1/

【讨论】：