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- ...
随机推荐
- 关于js闭包之小问题大错误
闭包是 JavaScript 开发的一个关键方面:匿名函数可以访问父级作用域的变量. 如果闭包的作用域中保存着一个 HTML 元素,则该元素无法被销毁.(下面代码来自高程) 刚看到一个关于闭包自己没注 ...
- router.go,router.push,router.replace的区别
除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现.当你点击 <router-link> 时,这个 ...
- MySQL性能测试工具sysbench的安装和使用
sysbench是一个开源的.模块化的.跨平台的多线程性能测试工具,可以用来进行CPU.内存.磁盘I/O.线程.数据库的性能测试.目前支持的数据库有MySQL.Oracle和PostgreSQL.当前 ...
- 配置方案:Redis持久化RDB和AOF
Redis持久化方案 Redis是内存数据库,数据都是存储在内存中,为了避免进程退出导致数据的永久丢失,需要定期将Redis中的数据以某种形式(数据或命令)从内存保存到硬盘.当下次Redis重启时,利 ...
- 在centos上搭建JavaWeb环境(jdk+mysql+tomcat)
1.安装OpenJDK yum list java* -openjdk* -y java -version 2.安装Tomcat cd /usr/local wget https://mc.qclou ...
- C++ STL--顺序容器(vector)
STL(标准模板库) 一套功能强大的 C++ 模板类,提供了通用的模板类和函数,这些模板类和函数可以实现多种流行和常用的算法和数据结构,如向量.链表.队列.栈. C++标准模板库的核心包含以下组件: ...
- mysql03
查询的列不在同一表中必须使用连接内连接,外链接 -- 输出学生姓名以及对应的年级名称 内连接 select studentName,gradeName from student inner join ...
- Solr创建核的方法
Solr创建核的方法,简单粗暴 就是进入到solrhome中进行复制粘贴这个collection2 然后进入到conf中,修改一下name 然后从新启动tomcat
- vi/vim 命令速查手册
vi 的基本概念 基本上vi可分为三种操作状态,分别是命令模式(Command mode).插入模式(Insert mode)和底线命令模式(Last line mode),各模式的功能区分如下: 1 ...
- python面向对象三大特性之一继承、多态、封装
继承,即在定义一个类时,以另一个类为参数,则称这个新定义的类继承了参数类,父类又称为基类. 单继承表示只继承一个类,多继承表示继承多个类. class parent1: pass class pare ...