javascript - CSS/JS : Triggering remote text glowing effect with transition

Question

我正在尝试将我拥有的这两个示例结合起来。
目前我有这个:

Nouns - Verbs

I like to ride my bicycle every day.

当您将鼠标悬停在“名词”上时，句子中的所有名词都会发光，“动词”也会发光。这是通过此示例 ( JSFiddle ) 实现的:

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  <span id ="noun">Nouns</span> - <span id="verb">Verbs</span>
</p>

I 
<span class="verb">like</span> 
to 
<span class="verb">ride</span> 
my 
<span class="noun">bicycle</span> 
every 
<span class="noun">day</span>.

CSS

#verb {

}

.verb {
text-shadow: none;
display: inline;
}
#noun {

}

.noun {
text-shadow: none;
display: inline;
}    

JS

$(document).ready(function(){
    $("#verb").mouseenter(function(){
        $(".verb").css("text-shadow", "0 0 3px blue");
    });
    $("#verb").mouseleave(function(){
        $(".verb").css("text-shadow", "");
    });

    $("#noun").mouseenter(function(){
        $(".noun").css("text-shadow", "0 0 3px red");
    });
    $("#noun").mouseleave(function(){
        $(".noun").css("text-shadow", "");
    });
});

但是我的发光效果太过瞬间开启和关闭，我想要一个很好的过渡，就像另一个例子 ( JSFiddle ):

HTML

<div class="confirm_selection">[ Confirm Selection ]</div> 

CSS

.confirm_selection {
    -webkit-transition: text-shadow 0.2s linear;
    -moz-transition: text-shadow 0.2s linear;
    -ms-transition: text-shadow 0.2s linear;
    -o-transition: text-shadow 0.2s linear;
    transition: text-shadow 0.2s linear;

    overflow-x: hidden; 
    overflow-y: hidden; 
    opacity: 1;

}
.confirm_selection:hover {
    text-shadow: 0 0 3px red;
}

有人可以告诉我如何组合这些吗？

Answer 1

您还可以切换类，以便在悬停#noun 时，它会将 .noun-hovered 添加到 .noun 并将过渡置于 .noun 上。这样你的 javascript 就只能删除/添加类。在这里看到:https://jsfiddle.net/okhceoLk/

JS:

$(document).ready(function(){
  $("#verb").mouseenter(function(){
    $(".verb").addClass("verb-hovered");
  });
 $("#verb").mouseleave(function(){
    $(".verb").removeClass("verb-hovered");
  });

  $("#noun").mouseenter(function(){
    $(".noun").addClass("noun-hovered");
  });
  $("#noun").mouseleave(function(){
    $(".noun").removeClass("noun-hovered");
  });
});

CSS:

 .verb,.noun {
   text-shadow: none;
   display: inline;
   transition: text-shadow 1s;
 }

 .verb-hovered {
   text-shadow: 0 0 3px blue;
 }

 .noun-hovered {
   text-shadow: 0 0 3px red;
 }