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 子。浏览器支持不是很好，但它可以处理任何转换工作（或多或少）。

.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

Answer 2

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

DEMO http://jsfiddle.net/kevinPHPkevin/BzcnN/2/

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

将鼠标悬停在文本上并在其他位置更改颜色

2 个答案:

demo