html - 将鼠标悬停在文本上并使其他地方的文本改变颜色

Question

我的措辞真的很糟糕，但我真的不知道怎么说，我正在尝试为 blog I recently made 制作此标题

我希望标题中的一个部分在悬停时更改颜色，然后另一个部分更改颜色以创建文本传送的错觉...

这是我目前的编码

.youtext{
padding-top:15px;    
padding-left:5px;    
background-color:#000; 
text-shadow:  0 0 0.3 #fff;
color:#fff;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear; 
}

.donttext{
padding-top:15px;    
padding-left:5px;    
background-color:#000; 
text-shadow:  0 0 0 #fff;
color:#000;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}    

.youtext:hover{
background-color:#000; 
text-shadow:  0 0 0 #fff;
color:#000;    
}

.youtext:hover .donttext{
text-shadow:  0 0 0.3em #fff;
color:#fff;   
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}

和其他部分

<div class="nowyouseeme">NOW 
<span class="youtext">YOU</span>
SEE ME, NOW YOU 
<span class="donttext">DON'T</span></div>

Answer 1

你需要使用通用的兄弟选择器(~)。否则它会寻找悬停元素的 .donttext child。浏览器支持不是很好，但它适用于任何转换工作(或多或少)。

.youtext:hover ~ .donttext{
    text-shadow:  0 0 0.3em #fff;
    color:#fff;   
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    transition: all 0.4s linear;
}

demo