鼠标懸浮/點擊/離開超級鏈接時改變顔色

在使用超級鏈接的時候，希望實現鼠标移至超級鏈接，該超級鏈接就改變字體顔色，以便區分當前選中的是哪個超級鏈接，提升用戶體驗，如下圖所示：

當模板加載完成之後，我們給它添加一個加載結束事件，用 jQuery 在事件中獲取到超級鏈接單元格對象，然後添加鼠标滑過事件，鼠标放到該對象上的時候就改變字體顔色，離開時就恢複原來的顔色。

我們以模板%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\SpecialSubject\HyplinkReport\超級鏈接解決Internet腳本運行慢示例主報表.cpt爲例，實現當鼠标移至超級鏈接的時候改變顔色。

3.1 添加加載結束後事件

方法一：

打開模板，點擊模板>模板 Web 屬性>分頁預覽設置，設置爲爲該模板單獨設置，在下方添加一個加載結束後事件，如下圖：

添加加載結束事件之後，在 JS 輸入框中輸入如下所示語句：

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

方法二：

添加加載結束事件之後，在 JS 輸入框中輸入如下所示語句：

$('.linkspan').mouseover(function(){$(this).css('color','red');}); //鼠标移上 
$('.linkspan').mouseleave(function(){$(this).css('color','blue');}); //鼠标離開 
$('.linkspan').mousedown(function(){$(this).css('color','gray');}); //鼠标點擊 

3.2 效果查看

點擊分頁預覽，将鼠标移至超級鏈接上的時候就能實現如上圖所示的效果。

模板保存在%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\SpecialSubject\HyplinkReport\超級鏈接顔色變化.cpt

在線查看模板效果請點擊 超級鏈接顔色變化 .cpt

關鍵字：鼠标懸浮/點擊/離開超鏈時改變顔色

點擊下載模板：超級鏈接顔色變化.cpt