css基础 :hover 鼠标放在父元素上,子元素变色

礼悟:
     公恒学思合行悟,尊师重道存感恩。叶见寻根三返一,江河湖海同一体。
          虚怀若谷良心主,愿行无悔给最苦。读书锻炼养身心,诚劝且行且珍惜。


               ide:visual studio 2017  
            browser:Chrome
                     os:win7

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="author" content="https://www.cnblogs.com/jizuiku"/>
    <title></title>
    <style type="text/css">

        .father {
            height:100px;
            width:100px;
            background-color:green;
        }

        .son {
            height:50px;
            width:50px;
            background-color:grey;
        }

        /* 真传一句话,看下面! */
        .father:hover .son {
            background-color:cyan;
        }

        .test {
            height:200px;
            width:300px;
            border:1px solid red;
            position:fixed;
            top:30px;
        }

    </style>
</head>
<body>
    <!--
        好玩的是
            从左上角进入父元素,鼠标指针是在子元素上,但是子元素依然变色!
        -->
    <div class="father">
        <div class="son"></div>
    </div>
    <!-- 这个测试div加的好 -->
    <div class="test">

    </div>
</body>
</html>

效果



CSS3优秀,值得学习。
学习资源: www.w3cschool.cn + itcast和itheima视频库 + 清净的心地。
如果您有公开的资源,可以分享给我的话,用您的资源学习也可以。
博文是观看视频后,融入思考写成的。博文好,是老师讲得好。博文坏,是 给最苦 没认真。

原文地址:https://www.cnblogs.com/jizuiku/p/8441460.html

时间: 2024-10-20 15:13:20

css基础 :hover 鼠标放在父元素上,子元素变色的相关文章

css 鼠标放在一个div上,另一个div展示出来

鼠标放在一个div上,另一个div展示出来. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>鼠标悬停图片上显示文字 在线演示 www.divcss5.com</title> <style> img{border:0}/* css 注释说明:设置图片边框为0 */ body{behavior:url("csshover

关于css中父元素与子元素之间margin-top的问题

之前在使用经常遇到下面的问题: html: 1 <div class="top"> 2 <div class="one">I'm the first!</div> 3 <div class="two">I'm the second!</div> 4 </div> css: .one{ width: 100px; height: 100px; background: red;

css设置时父元素随子元素margin值移动

父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. HTML,CSS: <div class="box1"> <div class="box2"> <div class="content"> <div class="margin">123</div> &l

父元素与子元素之间的margin-top问题(css hack)

hack: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&qu

父元素与子元素之间的margin-top问题(css hack)(转载)

情况: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. 解决方法: 1.修改父元素的高度,增加padding-top样式模拟(padding-top:1px:常用) 2.为父元素添加overflow:hidden:样式即可(完美) 3.为父元素或者子元素声明浮动(float:left:可用) 4.为父元素添加border(border:1px solid transparent可

css选择其指定标签父元素的子元素(first-child 与 first-of-type之间的区别)

一.选择元素父级的子元素(包含其它不相同的元素) (1)li:first-child { }; 选择第一个子元素(注意这里没有括号) (2)li:last-child { }; 选择ul中最后一个子元素 (3)li:nth-child(3) { }; 顺数第三个元素 (4) li:nth-last-child(3) { }; 倒数第三个 二.选择父级元素的相同子元素(不包含不相同的子元素) (1)li:first-of-type { } 选择第一个li (2)li:last-of-type{ }

css父元素和子元素之间margin-top的问题

问题:父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素的盒子也会受到子元素的margin-top值的影响. 原因:所有毗邻的两个或者多个元素的margin将会合并为一个margin共享之.毗邻的定义为:同级或者嵌套的盒元素,并且它们之间没有非空内容.padding或者border分隔.其中float和position(css2.1浮动元素和绝对定位元素不参与margin折叠) 解决方法: 1.修改父元素的高度,增加padding-top样式模拟(paddin

jquery选择器如何获取父级元素、同级元素、子元素

一.新建页面 1 <ul> 2 <li>list item 1</li> 3 <li>list item 2</li> 4 <li class="third-item">list item 3</li> 5 <li>list item 4</li> 6 <li>list item 5</li> 7 </ul> 8 9 <p>Hell

jquery选择器 之 获取父级元素、同级元素、子元素

一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 href_fir href_sec href_thr href_fiv $(document).ready(function(){ $("a").parent().addClass('a_par'); }); firebug查看jquery parent效果 二.获取同级元素: 1.next([expr]): 获取指定元素的下一个同级元素(注意是下一个同级元素哦) list item 1 list it