Change Color When Hovering/Clicking/Leaving the Hyperlink

When using a hyperlink, I hope to move the mouse to the hyperlink, and the hyperlink will change the font color to distinguish which hyperlink is currently selected and improve user experience, as shown in the following figure:

When the template is loaded, we add a loading end event to it, use jQuery to get the hyperlink cell object in the event, and then add the mouse over event, change the font color when the mouse is placed on the object, and when leaving Restore the original color.

We use templates%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\SpecialSubject\HyplinkReport\Hyperlink to Solve the Slow Running of Internet Script Sample Main Report.cptas an example, realize to change the color when the mouse moves to the hyperlink.

1. Add event Loading End

Method one:

Open the template, click Template> Web Attributes>Pagination Preview, set it Individually set for the template , and add an event Loading End below, as shown below:

After adding the loading end event, enter the following statement in the JS input box:

$("span.linkspan div").bind("mouseover",function(){
$(this).css("color","red");
}).bind("mouseleave",function(){
$(this).css("color","blue");
})

Method Two:

After adding the loading end event, enter the following statement in the JS input box:

$('.linkspan').mouseover(function(){$(this).css('color','red');}); //Mouse up 
$('.linkspan').mouseleave(function(){$(this).css('color','blue');}); //Mouse away
$('.linkspan').mousedown(function(){$(this).css('color','gray');}); //Mouse click

2. Effect view

Click the pagination preview and move the mouse to the hyperlink to achieve the effect shown in the above picture.

The template is saved in%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\SpecialSubject\HyplinkReport\Hyperlink Color Changes.cpt

Please check the completed template :

Hyperlink Color Changes.cpt

Keywords: change color when mouse hovering/clicking/leaving the hyperlink