css - ui-sref-active =“事件”在我的导航栏菜单中不起作用

我有侧面导航菜单，当您将鼠标悬停在图像链接上时，该菜单会从示例更改（从imgOn变为imgOff）。图像链接到页面。问题是，当我在导航菜单外单击时，图像无法保持活动状态。

CSS：

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

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

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

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

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

使用：focus并不能解决问题。

索引页：

<nav class="navbar navbar-fixed-top" role="navigation"> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav side-nav" > <li><a ui-sref-active="active" ui-sref="performance"><i id="icon-performance"></i><br>PERFORMANCE SNAPSHOT</a></li> <li><a ui-sref-active="active" ui-sref="overview"><i id="icon-overview"></i><br>OVERVIEW</a></li> <li><a ui-sref-active="active" ui-sref="audience"><i id="icon-audience"></i><br>AUDIENCE</a></li> <li><a ui-sref-active="active" ui-sref="socialMedia"><i id="icon-socialmedia"></i><br>SOCIAL MEDIA</a></li> <li><a ui-sref-active="active" ui-sref="emailCampaign"><i id="icon-email"></i><br>EMAIL CAMPAIGN</a></li> </ul> </div></nav>

控制器：

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">

CSS：

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

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

关于css - ui-sref-active =“事件”在我的导航栏菜单中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30549500/