Question

我有侧面导航菜单，当您将鼠标悬停在图片链接上时，会从示例（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);}'

使用：焦点不起作用。

索引页：

<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"
    })
});})();

Answer 1

您无法使用: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);
}

Answer 2

想出来。

HTML：

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

CSS：

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

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

UI-SREF活性=＆＃34;有源＆＃34;不在我的导航栏菜单中工作

2 个答案: