Question

我想在一个锚.timesheetSlot { -fx-fill: brown; -fx-width: 20; -fx-height: 25; -fx-cursor: hand; }内，有两种不同的下划线颜色。像这样：

</a>

我可以在悬停时向每个范围添加<a href="somehref"> <span>This text should underline RED on `a` hover</span> <span>This text should underline GREY on `a` hover</span> </a>，但这会导致每行单独悬停。我想要它，以便当我将鼠标悬停在text-decoration两个任意位置的任意位置时，其字体</a>继承。

这可能吗？

注意：我知道color但由于限制支持，我无法使用它。

Answer 1

这样的事情？您可以使用锚点:hover CSS伪类来设置它的子项和后代的样式。

以下是对CSS child和descendant选择器的引用。

＆＃13;

a {
  color: black;
  text-decoration: none;
}
a span:first-child {
  color: red;
}
a span:last-child {
  color: grey;
}
a:hover span {
  text-decoration: underline;
}

＆＃13;

<a href="somehref">
  <span>This text should underline RED on `a` hover</span>
  <span>This text should underline GREY on `a` hover</span>
</a>

＆＃13;

Answer 2

你试过这个吗？

a:hover span {
   text-decoration: underline; }

text-decoration: underline会自动继承字体颜色，因此如果您的跨度已经是灰色/红色，那么您需要做的就是在悬停a

时强调它们

Answer 3

您也可以试试这个。如果有这么多span元素

a{
  text-decoration:none;
}
a:hover span:nth-child(1){
  border-bottom:1px solid red;
}
a:hover span:nth-child(2){
  border-bottom:1px solid grey;
}

<a href="somehref">
    <span>This text should underline RED on `a` hover</span>
    <span>This text should underline GREY on `a` hover</span>
</a>

Answer 4

试试这个

a{
	text-decoration:none;
}
a:hover #span1{
text-decoration: none;
border-bottom: 1px solid red;
}
a:hover #span2{
text-decoration: none;
border-bottom: 1px solid grey;
}

<a href="somehref">
    <span id="span1">This text should underline RED on `a` hover</span><br/>
    <span id="span2">This text should underline GREY on `a` hover</span>
</a>

Answer 5

我添加了这个来继承span的颜色，这是你想要的，而不是在下划线中使用Object mail = null; if (attrs.get("mail") != null) { mail = attrs.get("mail").get(); } User user = new User(mail.toString());。 请注意，这是SCSS。

CSS颜色模块 - 4.4。 currentColor颜色关键字

CSS1和CSS2定义了border-color属性的初始值   是color属性的值，但没有定义   对应关键字。这种省略被SVG认可，因此   SVG 1.0引入了填充，笔画的currentColor值，   停止颜色，泛光颜色和灯光颜色属性。

CSS3扩展颜色值以包含 currentColor 关键字   允许它与所有接受值的属性一起使用。这个   简化了CSS3中这些属性的定义。

小提琴

https://jsfiddle.net/4f0mL136/3/

HEX

Answer 6

有几种方法可以做到这一点最好的方法是创建一个类（在CSS中）并在那里设置颜色第二种方法是在html代码中插入CSS 喜欢这里

.tool1:hover {
    background-color:red;
}
.tool2:hover {
    background-color:grey;
}

<!DOCTYPE html>
<html>
    <style>
    </style>
     
    <body style="text-align:center;">

        <p>Move the mouse over the text below:</p>

        <a href="somehref">
            <span class='tool1'>This text should underline RED on `a` hover</span>
            <span class='tool2'>This text should underline GREY on `a` hover</span>
        </a>

    </body>
</html>

一个锚中有多个下划线颜色

6 个答案: