我有侧面导航菜单,当您将鼠标悬停在图像链接上时,该菜单会从示例(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"
})
});})();
弄清楚了。
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);}
将此应用于所有导航图像。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句