I am attempting to create a hover effect on an h1 element that triggers the glowing effect on a span element with an id that corresponds to the value of the h1. While I have successfully set up a glowing effect for a sentence, I am struggling to replicate it for the h1 elements. My goal is to hover over an h1 and have a square of the same color glow as a result. Can anyone provide insight into where I might be making a mistake?
$(document).ready(function() {
$("#verb").mouseenter(function() {
$(".verb").addClass("hovered");
});
$("#verb").mouseleave(function() {
$(".verb").removeClass("hovered");
});
$("#noun").mouseenter(function() {
$(".noun").addClass("hovered");
});
$("#noun").mouseleave(function() {
$(".noun").removeClass("hovered");
});
$("h1").mouseenter(function() {
$("#".concat($(this).val())).addClass("hovered");
});
});._21 {
color: red !important
}
._106 {
color: orange !important
}
/*glowing effect*/
#verb {
color: blue
}
#noun {
color: blue
}
.hovered {
transition: text-shadow 0.1s linear;
text-shadow: 0 0 3px blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<span id="verb">Verbs</span> - <span id="noun">Nouns</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>
.
<br><br>
<h1 class="_21" value="red">
Red
</h1>
<h1 class="_106" value="orange">
Orange
</h1>
<p style="font-size: 28px">
<span class="_21" id="red">■</span>
<span class="_106" id="orange">■</span>
</p>