css如何实现鼠标经过隐藏显示样式

本篇内容介绍了“css如何实现鼠标经过隐藏显示样式”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

为龙湾等地区用户提供了全套网页设计制作服务,及龙湾网站建设行业解决方案。主营业务为成都做网站、成都网站建设、成都外贸网站建设、龙湾网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

在CSS中,可以利用“:hover”选择器和display属性来实现鼠标经过隐藏显示样式;只需要利用“:hover”选择器选择鼠标指针浮动在上面的元素,并给该状态的元素设置“display:none;”样式即可,语法“指定元素:hover {display:none;}”。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

在CSS中,可以利用“:hover”选择器和display属性来实现鼠标经过隐藏显示样式。

只需要利用“:hover”选择器选择鼠标指针浮动在上面的元素,并给该状态的元素设置“display:none;”样式,让其隐藏即可。



	
		
	
	
		
hello

css如何实现鼠标经过隐藏显示样式

说明:

:hover 选择器

:hover 选择器用于选择鼠标指针浮动在上面的元素。

提示::hover 选择器可用于所有元素,不只是链接。

在 CSS 定义中,:hover 必须位于 :link 和 :visited 之后(如果存在的话),这样样式才能生效。

:link 选择器设置指向未被访问页面的链接的样式,:visited 选择器用于设置指向已被访问的页面的链接,:active 选择器用于活动链接。

用法1:

这个表示的是:当鼠标悬浮在a这个样式上的时候,a的背景颜色设置为黄色

a:hover
    { 
        background-color:yellow;
    }

这个是最普通的用法了,只是通过a改变了style

用法2:

使用a 控制其他块的样式:

使用a控制a的子元素 b:

    .a:hover .b {
            background-color:blue;
        }

使用a控制a的兄弟元素 c(同级元素):

.a:hover + .c {
        color:red;
    }

使用a控制a的就近元素d:

.a:hover ~ .d {
        color:pink;
    }

总结一下:

1. 中间什么都不加  控制子元素;

2. ‘+’ 控制同级元素(兄弟元素);

3. ‘~’ 控制就近元素;

实例

用一个按钮控制一个盒子的运动状态,当鼠标移到按钮上方时,盒子停止运动,鼠标移开时,盒子继续运动

body代码:


    stop
    

css样式:

css如何实现鼠标经过隐藏显示样式

“display:none;”样式

display:none可以不占据空间,把元素隐藏起来,所以动态改变此属性时会引起重排(改变页面布局),可以理解成在页面中把该元素删除掉一样;不会被子孙继承,但是其子孙是不会显示的,毕竟都一起被隐藏了。



    
        
        
    
    
        
正常显示元素
        隐藏元素
        
正常显示元素
    

css如何实现鼠标经过隐藏显示样式

“css如何实现鼠标经过隐藏显示样式”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


网站标题:css如何实现鼠标经过隐藏显示样式
浏览地址:http://ybzwz.com/article/ihgesd.html

其他资讯