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

尝试在javascript中添加转换css。这可以帮到你。

  $("#verb").mouseenter(function(){
        $(".verb").css({"transition": "text-shadow 0.2s linear","text-shadow":"0 0 3px blue"});
    });

Answer 2

您还可以切换类，以便在#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;
 }

CSS / JS：通过转换触发远程文本发光效果

2 个答案: