徘徊时更改颜色

Question

我正在用html/css进行我的考试，并且我有一个问题 - 我们应该为字体创建网站，并且我希望有一个索引页，在那里我想拥有一个展示这样

R/r的 的Roboto

与字体为白色的彩色的，而分隔符是在蓝色的彩色字体的，但是我希望分隔符转白，而其余的的文字变成蓝色。

现在我有这样的：

a:hover { 
 
    color: #00ebff; 
 
    transition: 
 
}

<a href="roboto.html"> 
 
    <h1>R<span style="color: #00ebff" class="spacer">/</span>r</h1> 
 
    <h2>Roboto</h2> 
 
</a>

，我不能为我的生活弄清楚如何做到这一点。

Answer 1

你是正确的，但你需要在分隔符元素的选择器中更具体。下面的CSS应该达到你所需要的：

a:hover { 
    color: #00ebff; 
} 

a:hover span.spacer { 
    color: #fff !important; 
} 

请注意，这里使用!important规则是必不可少的，因为你使用内嵌样式。然而，这将是更好的CSS文件中定义.spacer风格太：

a .spacer { 
 
    color: #00ebff 
 
} 
 

 
a:hover { 
 
    color: #00ebff; 
 
} 
 

 
a:hover .spacer { 
 
    color: #fff; 
 
}

<a href="roboto.html"> 
 
    <h1>R<span class="spacer">/</span>r</h1> 
 
     <h2>Roboto</h2> 
 
</a>

Answer 2

.spacer{ 
    color: #00ebff; 
} 

a:hover { 
    color: #00ebff; 
} 

a:hover h1 .spacer{ 
    color: white; 
} 

Answer 3

a:hover { 
 
    color: #00ebff !important; 
 
} 
 
a:hover span.spacer { 
 
    color: #fff !important; 
 
}

<a href="roboto.html"> 
 
    <h1>R<span style="color: #00ebff" class="spacer">/</span>r</h1> 
 
    <h2>Roboto</h2> 
 
</a>

Answer 4

使用此代码

.spacer{ 
     color: #fff; 
    } 

    a:hover { 
     color: #00ebff; 
    } 

    a:hover .spacer{ 
     color: white !important; 
    }