hover 选择器

最新推荐文章于 2024-04-19 15:57:51 发布

拳是套路

最新推荐文章于 2024-04-19 15:57:51 发布

阅读量638

点赞数 3

文章标签： hover hover 选择器

本文链接：https://blog.csdn.net/weixin_43750811/article/details/103231229

版权

hover 选择器

定义和用法

:hover 选择器用于选择鼠标指针浮动在上面的元素。
选择鼠标指针浮动在其上的元素，并设置其样式：

a:hover
{
background-color:yellow;
}

HTML代码如下：

	<!DOCTYPE html>
	<html>
	<head>
	<style>
	a:hover
	{
	background-color:yellow;
	}
	</style>
	</head>
	<body>
	<a href="http://www.google.com">Google</a>
	
	<p><b>注释：</b>:hover 选择器鼠标指针在其上浮动的链接设置样式。</p>
	
	</body>
	</html>

代码运行效果：
在这里插入图片描述

hover第二个用法

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 300px;
            height: 300px;
            border: 1px solid #ff9f5a;
        }
        .content{
            width: 100px;
            height: 100px;
            background: #27e7ff;
        }
        .container:hover .content{
            background: #000000;
        }
    </style></head><body>
    <p class="container">
        <p class="content"></p>
    </p>

以上示例中，当存在父子关系的时候，可以通过父级的：hover使得子级的样式发生改变，写法为 .container:hover .content，hover后面有一个空格；但是，子级：hover改变不了父级的样式

hover第三个用法

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 300px;
            height: 300px;
            border: 1px solid #ff9f5a;
        }
        .content{
            width: 100px;
            height: 100px;
            background: #27e7ff;

        }
        .container:hover +.content{
            background: #000000;
        }
    </style></head><body>
    <p class="container"></p>
    <p class="content"></p>

以上示例，当两个元素不是父子关系，为同胞兄弟关系时，则通过 .container:hover .content这样的写法是无效的，则需要通过“+”号，即 .container:hover +.content才能显示出效果；但是要注意两个元素的先后顺序哦~

拳是套路

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
hover 选择器

hover 选择器定义和用法:hover 选择器用于选择鼠标指针浮动在上面的元素。选择鼠标指针浮动在其上的元素，并设置其样式：a:hover{background-color:yellow;}HTML代码如下： <!DOCTYPE html> <html> <head> <style> a:hover { backgro...
复制链接

扫一扫