CSS--点击改变样式
当某个链接或元素被选中时可以时,需要改变其颜色或状态,而stylus中提供&选择器,&指向父选择器,用于判断父元素达到某条件时改变状态,下面的例子中当父元素router-link有被选中(active)时,子元素改变颜色并加上下划线。
//html
<router-link tag="div" class="tab-item" to="/recommend">
<span class="tab-link"></span>
</router-link> //css
.tab-link
padding-bottom: 5px
color: #fff
&.router-link-active
.tab-link
color: #000
border-bottom: 2px solid #000
原文链接:https://blog.csdn.net/tjzc1352640/article/details/78359863
CSS--点击改变样式的更多相关文章
- vue列表渲染,以及鼠标点击改变样式的问题
在实际项目中,我们进场会遇到鼠标点击该表某个DOM元素的样式,在原生的js或者jquery中,我们会比较熟练的实现这个需求,但是在vue中怎么实现呢? 直接操作DOM?NO!NO! 既然我们的项目使用 ...
- sencha touch 扩展篇之使用sass自定义主题样式 (下)通过css修改官方组件样式以及自定义图标
上一讲我们讲解了如何使用官方的api来修改主题样式,这讲我们继续讲解sass的样式修改, 编译官方自带的主题包 在生成的项目以及官方sdk的目录下,自带了一些主题sass包,我们也可以通过修改sas ...
- css:hover状态改变另一个元素样式的使用
效果演示 css:hover状态改变另一个元素样式的使用 .box { width: 150px; height: 150px; background-color: #069; line-height ...
- vue点击时动态改变样式 ------- 最简单的方法
vue点击时动态改变样式 template中 <li :class="{ active:index==isActive }" @click="changeValue ...
- 一款基于jquery的下拉点击改变背景图片
今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览 源码下载 实现的代码. html代码: <a ...
- css入门二-常用样式
css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...
- 【CSS学习】--- 字体样式
一.前言 CSS字体属性可以定义文本的字体系列.大小.加粗.颜色.风格(如斜体)和变形(如小型大写字母). CSS的字体属性: font-family 设置字体系列 font-size 设置字体的尺寸 ...
- 【CSS学习】--- 文本样式
一.前言 CSS文本属性可以定义文本的外观.通过文本属性,可以定义文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. CSS常用的文本属性目录: text-align 文本对齐属性 te ...
- angular ng-repeat点击切换样式,浅谈track by $index
前言 angular ng-repeat点击切换样式,ng-repeat点击切换class样式,巧用ng-repeat track by $index. 1.问题 一个ul包含多个li,li通过ng- ...
随机推荐
- 洛谷 P1106 删数问题
一定要认真审题 “去掉其中任意k个数字后剩下的数字按原左右次序将组成一个新的正整数” 也就是说 输入:7893400 4 输出:300 (00在原顺序中位于3后边) 输入:789 ...
- 安装ubuntu18.04.1
下载ubuntu:https://www.ubuntu.com/download/desktop 在虚拟机创建好ubuntu18.04.1后无法启动(选择的是linux,ubuntu64位),提示:此 ...
- Linux 下wifi 驱动开发(四)—— USB接口WiFi驱动浅析
源: Linux 下wifi 驱动开发(四)—— USB接口WiFi驱动浅析
- Golang并发编程中select简单了解
select可以监听channel的数据流动select的用法与switch语法非常类似,由select开始的一个新的选择块,每个选择条件由case语句来描述 与switch语句可以选择任何使用相等比 ...
- ora-904 rowid create materialized view
create materialized view t_v asselect t1.*,1 as marker,rowid from t1 t1union allselect t2.*,2 as mar ...
- Unity3D之主菜单
1.新建一个名为MainMenu的C#脚本,修改编码后拖动到主摄像机,并给主摄像机添加一个AudioSource声音源作为背景音乐.将音乐文件赋值给Audio Clip属性. 2.创建一个Common ...
- Linux和windows之间使用scp无密码传输文件,脚本自动化
1.环境 windows2008 R2 和rhel 6.5 2.需求 通过在windows上指定计划任务,自动完成从Linux系统上备份文件到windows 3.工具 win: SSH Secure ...
- ldap集成nexus
nexus版本:2.14.4 添加nexus支持ldap认证: 管理员登录,点击 Administration --> Server -->Security Settings,将 OSS ...
- 一元二次方程解法的实现(Python)
请定义一个函数quadratic(a, b, c),接收3个参数,返回一元二次方程: ax2 + bx + c = 0的两个解. 提示:计算平方根可以调用math.sqrt()函数 # -*- c ...
- Python3 tkinter基础 Listbox Scrollbar 创建垂直滚动条
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...