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)
分享到:
相关推荐
AngularJS 是一个强大的前端JavaScript框架,由Google维护,主要用于构建单页应用程序(SPA)。它提供了丰富的功能,包括数据绑定、依赖注入、指令等,而"angularjs-router-directive"则聚焦于AngularJS中的路由和...
在本文中,我们将深入探讨基于AngularJS的前端项目——Angular-Strap,它是一个将Bootstrap组件与AngularJS相结合的库,旨在提供更丰富的交互性和动态功能。Angular-Strap允许开发者利用AngularJS的强大功能和...
AngularJS,一个由Google维护的JavaScript框架,专注于数据绑定和依赖注入,使得前端开发更加模块化和易于维护。而Bootstrap,则是Twitter推出的一款用于快速构建响应式和移动优先网站的前端框架,它提供了丰富的UI...
Angular-Materialize 是一个专门为 AngularJS 开发的库,它将 Google 的 Material Design 设计理念与 Materialize CSS 框架相结合,为前端开发者提供了一套强大的 UI 组件和交互效果。这个项目的目的是为了让 ...
AngularJS内建了一个轻量级的jQuery库——jqLite,它提供了一些基本的DOM操作功能。 jqLite虽然不包含jQuery的所有方法,但足以满足大部分基础操作,如选择元素、事件处理、属性操作等。如果你的项目已经包含了...
"admin-angular:管理角度"是一个基于AngularJS和Bootstrap构建的后台管理系统。这个项目的核心目标是为开发者提供一个高效、易用且功能丰富的管理界面框架,主要用于实现后台数据的展示、操作和管理。AngularJS,...
在这个案例中,我们使用Angular UI Bootstrap的`collapse`指令来控制菜单项的展开和折叠,`navbar`组件则负责创建基础的菜单结构。 下面是如何使用Angular UI Bootstrap创建侧边栏菜单的基本步骤: 1. **引入依赖*...
AngularJS,由Google维护,是一个强大的JavaScript框架,主要用于构建动态单页应用程序(SPA)。而Bootstrap,则是一个流行的前端开发框架,它提供了一套响应式设计、移动设备优先的HTML、CSS和JS组件,使得构建美观...
角度音乐应用程序在 angularjs 课程中创建的音乐应用 - firefox 插件使用这样的变量:(来自 navbar.html) '::' 导致 angular 仅在未定义之前监视此变量。 在初始化的那一刻 - 它停止观看。 用于限制观察者的数量...
所有这些Angular-Strap模块都是用JavaScript编写的,利用了AngularJS的依赖注入、指令和表达式等特性。JavaScript是一种广泛使用的客户端脚本语言,对于构建动态和交互性强的Web应用至关重要。AngularJS是基于...
4. **模块化**:AngularJS支持模块化应用结构,`framework7.angular.js`可能封装成一个AngularJS模块,方便在项目中导入和使用。 5. **路由管理**:AngularJS的路由系统允许根据URL导航到不同的页面。`framework7....
Angular 4是Angular框架的一个重要版本,它带来了性能优化、体积减小以及更少的API变动。本篇文章将详细介绍如何准备Angular 4的开发环境以及使用Angular CLI来创建项目。 首先,开发环境的搭建至关重要。在开始...
AngularJS是一个强大的JavaScript框架,用于构建动态Web应用,而Bootstrap则是一个流行的CSS框架,用于快速开发响应式和移动优先的网站。 首先,我们要在项目中引入所需的库文件。在`index.html`中,我们需要添加...
该网站使用AngularJS和某些Bootstrap编写(出于移动兼容性)该网站的运作方式如果您不了解AngularJS,那么您会对该网站的某些部分感到困惑,但是基本要点是: Angular允许您创建自定义html标记,该标记按照/scripts/...
2. `js` - 存放JavaScript代码,可能包括AngularJS的服务、控制器、指令等。 3. `img` - 图片资源,可能包含应用图标、聊天表情等。 4. `templates` - HTML模板文件,用于构建应用的各个视图。 5. `lib` - 第三方库...
同时,可以与其他库和框架(如jQuery、AngularJS、React等)结合使用,进一步扩展功能。 7. **最佳实践**: 在使用这个模板时,应注意遵循Web开发的最佳实践,例如,保持代码简洁、遵循语义化HTML、优化图片大小、...
Angular Material是AngularJS的一个官方UI组件库,提供了许多美观的、响应式的组件。 2. **React**:Facebook推出的视图层库,强调组件化开发。虽然React本身不包含MVC模式,但与Redux或MobX等状态管理工具结合使用...