Hello, I need some help troubleshooting my jQuery code. I am attempting to create a hover effect where hovering over one text element will apply CSS to the other two elements. I'm not sure if the issue lies in the $(".yo") or the ('blur') part of the code. Any insight would be greatly appreciated.
After editing the jQuery, I noticed that the CSS remains applied even after mouseout. Any suggestions on how to fix this?
Updated jQuery:
$(".blur").mouseover(function(){
$(this).siblings().addClass('blur textshadow');
}).mouseout(function(){
$(this).siblings().removeClass('textshadow out');
});
HTML:
<div class="yo">
<div class="blur out" id="one"> hi </div>
<div class="blur out" id="two"> my </div>
<div class="blur out" id="three"> name </div>
</div>
CSS:
div.blur
{
text-decoration: none;
color: #339;
}
div.blur:hover, div.blur:focus
{
text-decoration: underline;
color: #933;
}