发表于： 2019-10-08 19:04:10
1 1002
今天完成的事情
制作任务7第二个页面
今日收获：
1.投票页中触发鼠标点击事件，在鼠标点中黄色方格后下面浮现出4个小图片。
方法：
<div
display:none; //元素默认是隐藏的
}
//当鼠标经过兄弟元素brother-showing时，也就是经过父级father的时候。父级获得hover状态，在父级hover的基础上写element的样式：
.father:hover .element{
display:block ;
注意事项：保证下面的四个小方框和黄色的方框要处于同一个父级元素内，并且要对父级元素进行hover操作，hover只能对元素本身和它的子元素或者同级进行操作。不能对上一级元素进行操作。
PS:对同级元素操作时要采用相邻兄弟元素选择器
<body>
<div
<div
</div>
<div
</body>
.hover-1:hover +.hover-2{
background-color: bisque;
}
2.伪类 伪元素
伪类有：:first-child ，:link:，vistited，:hover:，:active，:focus，:lang，:right，:left，:first
即是css内植类css内部本身赋予它一些特性和功能，也就是你不用再...你就可以直接拿来使用，当然你也可以改变它的部分属性比如：a:link{color:#FF0000;}
CSS很多的建议并没有得到浏览器的支持，但有四个可以安全用在超链接上的伪类。
:link用在未访问的连接上。
:visited用在已经访问过的连接上。
:active用于获得焦点（比如，被点击）的连接上。
:hover 用于鼠标光标置于其上的连接。
伪元素有： :first-line，:first-letter，:before，:after
伪元素的语法：
selector:pseudo-element {property:value;}
CSS 类也可以与伪元素配合使用：
selector.class:pseudo-element {property:value;}
返回列表
评论