首页 > 其他分享 >#css#如何使用hover,实现父对子的样式改变?

#css#如何使用hover,实现父对子的样式改变?

时间:2022-09-19 16:33:20浏览次数:60  
标签:到父 hover 盒子 样式 color css 对子 类名

思路及做法:
鼠标移动到父盒子的时候,
里面所有的子盒子的样式都发生变化的,
只需要直接在hover后面加上空格,
并且加上子盒子的类名 ,里面再写其他样式


.父盒子的类名:hover .子盒子的类名 {
//这里写鼠标移入到父盒子里面,子盒子要发生的样式变化
}


温馨提示,遇到父盒子里面的子盒子过多时,可以采取简写的形式:
以下为简写形式:


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



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

标签:到父,hover,盒子,样式,color,css,对子,类名
From: https://www.cnblogs.com/xuelinomen/p/16708109.html

相关文章

  • css font-size设置小于12px失效(转)
    原文:https://blog.csdn.net/weixin_38629529/article/details/1198664951、描述不知道你有没有遇到这样的情况,设置了font-size为10px,打开控制台审查元素也显示的是10px,但......
  • 【自动化测试】xpath、css使用及区别
    CSS和XPATH的功能对比对比项定位方式CSSXPATH常规属性id#id_keyword//*[@id=‘id关键字‘]常规属性class.class_name//*[@class=‘class属性名‘]......
  • 【css】-- flex:1的作用
    flex:1实质上是 flex-grow:1;flex-shrink:1;flex-basis:0;flex默认值为01auto该属性有两个快捷值:auto (11auto)和none(00auto)一、flex-growflex-grow......
  • CSS 中的 :is() 和 :where() 是什么?它们是相同的还是不同的?
    什么是:是()和:where()在CSS中?它们是相同的还是不同的?这:是()伪类函数将选择器列表作为其参数,并选择可以由该列表中的选择器之一选择的任何元素。:is()以上等价于以......
  • CSS 笔记
    CSSCSS,或CascadingStyleSheets(层叠样式表或级联样式表),用来给浏览器添加样式。引入CSS的方式Import内联InlineStyle使用style属性来引入CSS<h1style="col......
  • CSS笔记
    ①CSS引入方式1)(最常用)在<head>元素下引入:【<link rel="stylesheet"href="xx.css">】3)在CSS文件中导入【@importurl(xx.css)】(语句需写在css文件的开头)3)在style......
  • css简单动画 @-webkit-keyframes、-webkit-transform、webkit-animation的使用
    浏览器前缀IE10和Firefox(>=16)支持没有前缀的animation,firefox(<16)使用-moz-前缀,因为现在firefox的版本也都不低,所以firefox都直接使用没有前缀的animation。而chrome,safa......
  • 纯HTML、CSS制作Tab页面浏览(国外youtube分享)
    纯HTML、CSS制作Tab页面浏览(国外youtube分享)影片来源https://www.youtube.com/watch?v=oLqdy95LZSw&list=WL&index=72&t=259s近期执行一个小Project,主要是复制网页版......
  • CSS 网格基础
    CSS网格基础本周我决定研究定位和布局网站的最佳方法之一……CSS网格布局模块。使用这种方法可以很好地布置网站、应用程序甚至是一个小元素容器。它允许我们开发人员在......
  • 使用 CSS 的 Glassmorphic 配置文件卡
    使用CSS的Glassmorphic配置文件卡在这篇博客中,我们使用css创建了一个glassmorphic配置文件卡。获取完整的源代码编码扭矩.com版权声明:本文为博主原创文章,遵循......