CSS stylus 中 hover 触发子元素

示例：仿一个简单的按钮，文字和图标。使用 stylus，hover 时文字和图标都变色。

html

<div class="btn">点击<i class="el-icon-sort"/>
</div>

css

.btn {background: #ccc;display: inline-block;padding: 8px 15px;cursor: pointer;&:hover {color: blue;i {color: red;}}
}

效果

CSS stylus 中 hover 触发子元素相关推荐

解决vue项目中@mousemove 事件子元素触发了父元素事件
在Vue项目中使用@mousemove事件从$event中获取x与y轴时 , 如果绑定此事件的元素内还有别的子元素那么同样会触发mousemove事件 , 但是$event.target会是这个子元素 ...
CSS中hover改变其他元素样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <m ...
CSS定位中“父相子绝”
一.定位的介绍定位有三种:相对定位(position:relative).绝对定位(position:absolute).固定定位(position:fixed) 二.三种定位的用法,特点和实例 2 ...
CSS实现自适应布局：子元素项目整体居中，内部项目左对齐
日常工作时,我们可能遇到这样一个布局:一个父元素框框(随着浏览器大小自适应宽度)里面有许多按钮,然后这些按钮(宽度固定)的整体需要在父元素内居中对齐,而按钮整体的内容又是从左往右排列.这里提供一个解决 ...
CSS之关系选择器（子元素、后代、兄弟选择器）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
在vue页面监听中如何修改子元素的样式
项目原先代码: 需要实现的是导航栏在页面下滑到一定位置的时候,对其样式进行修改父组件system.vue页面 <template> <div><div id=" ...
css hover控制子元素、同级元素样式
引用:获得最佳方案的参考网址这是参考网址的原案 1.父子关系 .a:hover .b{color:red}; 2.同级相邻元素 .a:hover + .b{color:red}; 同级不相邻元素 . ...
通过hover显示子元素
<style> .parent{} .parent:hover>.child{display:inherit} .child{display:none} </style> ...
JQuery选择器中的子元素选择器
子元素筛选选择器不常使用,其筛选规则比起其它的选择器稍微要复杂点,其实博主感觉并不怎么难啦,因为单词so easy,哈哈. 我们来看看都有哪些吧: 注意: 1. :first只匹配一个单独的元素,但是 ...

CSS stylus 中 hover 触发子元素

html

css

效果

CSS stylus 中 hover 触发子元素相关推荐

最新文章

热门文章