HTML;
<ul class="stats-sidebar-nav">
<li class="item" ng-class="{'selected-1':statsView=='overview', 'item-hover': hover}" ng-mouseenter="hover1 = true" ng-mouseleave="hover1 = false"><a href="#/overview">课程总览</a></li>
<li class="item" ng-class="{'selected':statsView=='satisfaction', 'item-hover': hover2}" ng-mouseenter="hover2 = true" ng-mouseleave="hover2 = false"><a href="#/satisfaction">课程满意度</a></li>
<li class="item" ng-class="{'selected':statsView=='proactivity', 'item-hover': hover3}" ng-mouseenter="hover3 = true" ng-mouseleave="hover3 = false"><a href="#/proactivity">课程活跃度</a></li>
<li class="item" ng-class="{'selected':statsView=='understanding', 'item-hover': hover4}" ng-mouseenter="hover4 = true" ng-mouseleave="hover4 = false"><a class="" href="#/understanding">授课消化度</a></li>
</ul>
less:
@light-blue-bg: #1387C0;
a:hover{
text-decoration: none;
}
.hide {
display: hidden;
}
.border-fix {
border-top: 1px solid @light-blue-bg; // pixel perfect
}
.stats-sidebar-nav {
float: left;
width: 200px;
height: 700px; // actuall 500px
background-color: #324056;
.item {
&.selected{
background-color: @light-blue-bg;
font-weight: bold;
}
&.selected-1{
background-color: @light-blue-bg;
font-weight: bold;
.border-fix;
}
cursor: pointer;
width: 200px;
height: 40px;
border-top: 1px solid #3D4A5D;
padding-left: 18px;
a {
line-height: 40px;
height: 100%;
width: 100%;
display: block;
text-decoration: none;
color: white;
}
}
.item-hover {
background-color: @light-blue-bg;
// .border-fix;
}
}
javascript: 无
解释:
在html中,ng-mouseenter 与 ng-mouseleave 给每个块定义了一个hover[i]变量,这个变量控制了ng-class中得item-hover。
css中,.stats-sidebar-nav .item a 定义了a的:
1. line-height 使得文字居中
2. height width 均为100%, display为block 使得a的大小与div相重合。(所以实现hover的另外一个思路就是用a:hover)
分享到:
相关推荐
Clever-Bootstrap-4-Admin-Template-with-AngularJS-Angular-2-support-master
根据官网上做的,跟网上有点小出入,测试没写!
Angular-Clever-Bootstrap-4-Admin-Template-with-AngularJS-Angular-2-support.zip,clever是具有angular 2和angularjs支持的bootstrap 4管理模板clever bootstrap 4管理模板具有angularjs和angular2支持。...
angularjs框架中,实现移动端pdf文档在线预览功能
angularjs-google-places, Google位置API的angular.js 包装器 AngularJS-Google-PlacesGoogle位置API的angular.js 包装器 Bower这里模块可以作为 Bower 软件包使用,使用以下命令安装:bower install angularjs-goog
AngularJS-FlowChart, 可视化和编辑流程图的示例/模板WebUI控件 ...虽然这不是完全通用的,但是如果你需要使用SVG流程图并且愿意使用 AngularJS,那么它将是一个很好的基础。代码项目文章http://www.codeprojec
下拉选中搜索angularjs-dropdown-multiselect.js
angulr-bootstrap-admin-web-app-with-angularjs 2.0版本来拉。由于最近比较忙所有没有持续更新这个版本。在此特地发一下2.0.1版本的。如果有需要我之前版本的请查看我的资源,移驾之前的资源。绝对官网下载的完整包...
Angular-angularjs-google-maps.zip,最简单的angularjs google maps v3 directivegoogle maps angularjs指令,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。...
Angular-AngularJS-StyleGuide.zip,My Ng Conf 2014 TalkScalable Architecture in Angularjs的可扩展架构示例,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。...
AngularJS-Cheat-Sheet
Angular-angularjs-in-patterns.zip,模式中的angularjs——这个存储库提供了对angularjs的不同看法。它包含在框架或任何角度应用程序中使用不同设计模式的信息。,Angularjs于2016年发布,是Angularjs的重写版。它...
Angular-angularjs-chat.zip,Angularjs聊天-在iOS、Android和Web应用程序中提供聊天信息体验。Angularjs聊天,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。...
script type =" text/javascript " src =" angularjs-datatables-service.js " > </ script > 将其包含在您的app.module.js中 'use strict' ; angular . module ( 'exampleApp' , [ 'angularjs-...
Angular-AngularJS-Learning-zh_CN.zip,一、Angularjs、Angularjs、Angularjs(学习Angularjs的博客文章、文章、视频等的链接)Angularjs,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、...
angular and asp mvc crud application
angularjs-datetime-picker
AngularJS到Angular升级路径 组织 角度v1 来自基本AngularJS应用程序 角v1角v5 带有AngularJS和Angular测试的混合应用程序 可以在找到所采取的步骤 src 脚本集合,这些脚本对于将AngularJS升级到Angular很有用。 ...
babel-plugin-angularjs-注释 适用于Babel用户的分支,重点是速度和ES6支持。 将Angular 1.x DI注释添加到Babel正在处理的ES5 / ES6代码中,并支持显式注释( /* @ngInject */ )和典型的Angular代码模式的自动...
AngularJS-in-Action