hover在两种情况下的两种用法

:hover在鼠标移到链接上时添加的特殊样式。

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

提示: :link 选择器设置了未访问过的页面链接样式, :visited 选择器设置访问过的页面链接的样式 :active选择器设置当你点击链接时的样式。

注意: 为了产生预期的效果，在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后！！
前两天遇到一个关于：hover的问题，困惑了好久

这里我们举个例子看一下:hover在两种情况下的两种用法

先说一下，下面的代码想实现的效果：当鼠标放在“嗯呐”框上，让下面对应的hello框出现。（背景颜色，字的大小，框的大小这些不太重要我们这里就随便给的）
情况一：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.list_block{position: relative;width: 200px;height: 50px;border: 1px solid saddlebrown;margin: auto;line-height: 50px;text-align: center;}.child{position: absolute;z-index: -1;top: 50px;left: 0;width: 200px;height: 300px;border: 1px solid red;background: pink;display: none;box-sizing: border-box;}.list_block:hover{background: pink;color: red;border-bottom: 1px solid white;}.list_block:hover .child{display: block;}</style>
</head>
<body>
<div class="list_block">
嗯呐<div class="child">hello</div>
</div></body>
</html>

如图是“嗯呐”hover的时候，在嗯呐hover的时候让下面hello的框出现
当hover的元素和需要改变样式的元素是父子关系时，可以写成这种形式（ .list_block:hover .child）简单来说就是，父子关系的时候，要hover的元素类名称+:hove+空格+要改变样式的元素的类名称。

**情况二：**和上段代码要实现的效果一样哦

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.list_block{position: relative;z-index: 5;width: 200px;height: 50px;border: 1px solid saddlebrown;margin: auto;line-height: 50px;text-align: center;}.child{position: absolute;top: 59px;left: 667px;width: 200px;height: 300px;border: 1px solid red;background: pink;display: none;}.list_block:hover{background: pink;color: red;border-bottom: 1px solid white;}.list_block:hover+  .child{display: block;}</style>
</head>
<body>
<div class="list_block">
嗯呐
</div>
<div class="child">hello</div>
</body>
</html>

此时，.list_block和.child是兄弟关系（同级），这种情况下用.list_block:hover .child就不能实现鼠标放在“嗯呐”上出现“hello”的框，这种情况应该这样写（ .list_block:hover+ .child）简单地说就是要hover的元素类名称+（:hove+）+空格+要改变样式的元素的类名称。

hover在两种情况下的两种用法相关推荐

进一步封装axios并调用其读取数据（吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持，在这两种情况下的系统只能使用ajax或者原生js请求后台数据）
注意!!!(修改于2020年7月18日) 在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据报错截图如下报错内容: {&quo ...
从键盘输入两个数作为除数和被除数。要求程序中捕获NumberFormatException 异常和ArithmeticException 异常，而且无论在哪种情况下，“程序执行结束”这句话都会在控制
编写应用程序,从键盘输入两个数作为除数和被除数.要求程序中捕获NumberFormatException 异常和ArithmeticException 异常, 而且无论在哪种情况下,"程序执 ...
编写应用程序，从命令行传入两个整型数作为除数和被除数。要求程序中捕获NumberFormatException 异常和ArithmeticException异常，而且无论在哪种情况下，“总是被执行
package com.bw.tryCatch;import java.util.Scanner;public class zuoYe1 {// 编写应用程序,从命令行传入两个整型数作为除数和被除数. ...
如何在不引入第三个变量的情况下互换两个变量的值
如何在不引入第三个变量的情况下互换两个变量的值算术运算异或运算解构总结例:x = 4:y = 5.如何在不引入第三个变量的情况下互换x与y的值? 算术运算第一种方法是加法. x = x + ...
C++在不使用任何算术运算符的情况下将两个数字相加(附完整源码)
C++在不使用任何算术运算符的情况下将两个数字相加 C++在不使用任何算术运算符的情况下将两个数字相加完整源码(定义,实现,main函数测试) C++在不使用任何算术运算符的情况下将两个数字相加完整源 ...
下面是以十六进制格式存储的一个 UDP 首部：~~~TCP连接使用1000字节的窗口值，而上一次的确认号是22001~~那么下一个报文段的序号是否就是 x + 1 呢？在本题中列出的 8 种情况下，画
5-10 试说明运输层中伪首部的作用用于计算运输层数据报校验和 5-11 某个应用进程使用运输层的用户数据报UDP,然而继续向下交给IP层后,又封装成IP数据报.既然都是数据报,可否跳过UDP而直接 ...
有10个站连接到以太网上。试计算一下三种情况下每一个站所能得到的带宽。
问题有10个站连接到以太网上.试计算一下三种情况下每一个站所能得到的带宽. (1)10个站都连接到一个10Mb/s以太网集线器: (2)10个站都连接到一个100Mb/s以太网集线器: (3)10个 ...
java switch配合return_关于Java switch语句：关于Java switch语句 – 在每种情况下使用return和省略break...
鉴于这种方法,这是否代表了一些令人震惊的风格或语义失误: private double translateSlider(int sliderVal) { switch (sliderVal) { ca ...
php和mysql函数的区别吗,(PHP,MySQL)函数仅在2种情况中的1种有效,找不到区别
因此,我具有此功能来搜索MySQL数据库中的条目: private function SearchContributors($search) { $search_pieces = explode(' ...

hover在两种情况下的两种用法

hover在两种情况下的两种用法相关推荐

最新文章

热门文章