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

尝试添加此class，以便在悬停时在文本下方添加点缀：

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

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

Answer 2

您需要添加以下两项：

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

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

请参阅： http://jsfiddle.net/olivier_royo/s159y4m1/

Answer 3

你需要这样做：

.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 个答案: