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

Question

我的措辞非常糟糕，但我真的不知道该怎么说，我正在尝试为我最近制作的博客制作这个标题

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

这是我到目前为止的编码

.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 子元素。浏览器支持不是很好，但它适用于任何转换工作（或多或少）。

.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;
}

演示

Answer 2

如果您想支持旧浏览器和新浏览器，那么 jQuery 是一种安全的方法

演示http://jsfiddle.net/kevinPHPkevin/BzcnN/2/

$(".hover").hover(function () {
    $(".target").toggleClass("color");
});