Css ui sref active="；主动的；在我的导航栏菜单中不工作

我有一个侧导航菜单，当您将鼠标悬停在图像链接上时，它会从示例（

imgOn

更改为

imgOff

）。图像链接到一个页面。问题是，当我在导航菜单外单击时，图像无法保持活动状态

CSS:

使用：焦点不起作用

索引页：

性能快照

概述

听众

社交媒体

电子邮件活动

控制器：

app.config(function($stateProvider, $urlRouterProvider){

$urlRouterProvider.otherwise("/overview")

$stateProvider
    .state("overview", {
        url: "/overview",
        templateUrl: "partials/partialOverview.html"
    })
    .state('audience',{
        url: "/audience",
        templateUrl: "partials/partialAudience.html"
    })
    .state('socialmedia',{
        url: "/socialmedia",
        templateUrl: "partials/partialSocialMedia.html"
    })
    .state('emailcampaign',{
        url: "/EmailCampaign",
        templateUrl: "partials/partialEmailCampaign.html"
    })
    .state("performance", {
        url: "/Performance",
        templateUrl: "partials/partialPerformance.html"
    })
});})();

---

使用

：focus

无法执行此操作。CSS焦点选择器仅适用于表单输入和超链接。您需要使用JavaScript来实现这一点

单击时焦点类切换的角度示例：

<img ng-class="{focus: hasFocus}" ng-click="hasFocus = !hasFocus">

我明白了

HTML:

---

将此应用于所有导航图像。

为什么要标记

angularjs

？因为这是与angularjs mvc框架一起使用的，所以如何“选择”图像？我使用一个控制器，请参阅上面的补充内容，我是angularjs新手。您有javascript或jquery的源代码或示例吗？

<img ng-class="{focus: hasFocus}" ng-click="hasFocus = !hasFocus">

#icon-performance{
    content: url(../app/images/performance-white.png);
}

#icon-performance:hover,
#icon-performance.focus{
    content: url(../app/images/performance-blue.png);
}

<li><a ui-sref-active="active" ui-sref="performance"><i id="icon-performance"></i><br>PERFORMANCE SNAPSHOT</a></li>

.nav > li > .active #icon-performance{content: url(../app/images/performance-blue.png);}