添加切换到 jQuery mouseover 事件以触发 CSS 颜色更改

Question

I have below script that works fine when the mouse is hover over the #eventID then the #targetID text color turns purple. I hope to add a toggle to the script so that when mouseout the text color changes back to its original or defined color.

$("#eventID").on ("mouseover",function(){
  $("#targetID").css("color","purple");
})

I tried to add the toggle before the css function and before the jQuery event listener, but neither of them works.

Test1:

$("#eventID").on ("mouseover mouseout",function(){
  $("#targetID").toggle(css("color","purple"));})

Test2:

$("#eventID").toggle(on("mouseover mouseout", function() {
  $("#targetID").css("color", "purple");}));

Answer 1

You can use:

$("#eventID").on("mouseover", function() { 
   $("#targetID").css("color","purple");
}).on("mouseout", function() {
   $("#targetID").css("color","");
});

This will clear the inline color style. when you mouseout.