hover选择器和display属性实现隐藏显示样式

最新推荐文章于 2024-05-15 23:18:27 发布
最新推荐文章于 2024-05-15 23:18:27 发布
阅读量3.5k 收藏 5
点赞数
文章标签： javascript 前端 vue.js
原文链接：http://pop254.wikidot.com
版权

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

前端（vue）入门到精通课程：进入学习
API 文档、设计、调试、自动化测试一体化协作工具：点击使用

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 520px;

height: 50px;

background-color: #008000;

}

div:hover {

display:none;

}

</style>

</head>

<body>

<div>

hello

</div>

</body>

</html>

说明：

:hover 选择器

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

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

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

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

用法1：

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

1

2

3

4

a:hover

{

background-color:yellow;

}

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

用法2:

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

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

1

2

3

.a:hover .b {

background-color:blue;

}

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

1

2

3

.a:hover + .c {

color:red;

}

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

1

2

3

.a:hover ~ .d {

color:pink;

}

总结一下：

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

2. ‘+’ 控制同级元素（兄弟元素）；

3. ‘～’ 控制就近元素；

实例

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

body代码：

1

2

3

4

<body>

<div class="btn stop">stop</div>

<div class="animation"></div>

</body>

css样式：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<style>

.animation {

width: 100px;

height: 100px;

background-color: pink;

margin: 100pxauto;

animation: move2s infinite alternate;

-webkit-animation: move2s infinite alternate;

}

@keyframes move{

0%{

transform: translate(-100px, 0);

}

100%{

transform: translate(100px, 0);

}

}

.btn {

padding: 20px50px;

background-color: pink;

color: white;

display: inline-block;

}

.stop:hover ~ .animation {

-webkit-animation-play-state: paused;

animation-play-state: paused;

}

</style>

“display:none;”样式

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<style>

.display{

display:none;

}

</style>

</head>

<body>

<div>正常显示元素</div>

<divclass="display">隐藏元素</div>

<div>正常显示元素</div>

</body>

</html>

jiujiu889
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt
07-30
1.复合选择器 （1）后代选择器（包含选择器 重要） 语法： 元素1 元素2 {样式声明} 选择器1 选择器2{ 属性：属性值 } 元素1和元素2用空格隔开 元素1父亲 元素2后代 最终改变的是后代（元素2）的样式 ...
利用css的样式对文本进行隐藏和显示等操作
09-25
6. **伪类选择器**：如`:hover`、`:focus`等，可以改变元素在特定状态下的显示效果，例如鼠标悬停时显示隐藏的文本。 总的来说，CSS提供了丰富的工具和方法来控制文本的显示和隐藏，满足各种设计需求。熟练掌握这些...
css用hover控制显示与隐藏
m0_72959610的博客
08-10 5677
css用hover控制元素的显示与隐藏
鼠标悬浮显示隐藏的div
Java_learneryy的博客
04-22 5683
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .ap{ width: 75px; height: 35px; border: 1p...
鼠标悬浮（hover）时显示提示框的效果
最新发布
Dalao_zzl的博客
05-15 984
在Vue中，你可以使用多种方法来实现鼠标悬浮（hover）时显示提示框的效果。以下是一个简单的示例，它使用了Vue的指令（directive）和条件渲染（conditional rendering）来实现这个功能。指令来控制提示框的渲染。首先，我们需要在Vue组件中定义一个数据属性来控制提示框的显示与隐藏，以及一个方法来处理鼠标进入和离开事件。另外，如果你想要一个更复杂的提示框（比如支持HTML内容、延迟显示/隐藏等），你可能需要使用一个专门的库，如。（一个Vue的提示框插件）或其他类似的库。
CSS实线鼠标移入显示隐藏div
qq_67413159的博客
04-08 7385
用CSS中的 hover 事件，实线鼠标移入显示隐藏元素。 效果如下： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>移入显示</title> <style> .hov{ width: 300px; background-color: #FFA500; border-radius:..
【hover隐藏·HTML元素】
Feng_zheng_的博客
01-29 1479
CSS 中的 hover 状态可以在用户鼠标悬停在元素上时触发特定样式。 一、定义一个 CSS 类 我们需要定义一个 CSS 类，让它能够隐藏元素。可以通过设置元素的 display 属性为 none 来实现。
css元素hover時控制另一个元素的显示隐藏
热门推荐
u011511086的专栏
11-30 6万+
css元素hover時控制另一个元素的显示隐藏
jQuery 网易相册鼠标移动显示隐藏效果实现代码
10-27
本示例将详细介绍如何使用jQuery实现类似网易相册的“鼠标移动显示隐藏”效果，即当鼠标移动到图片上方时，显示“设为封面”和“删除”操作选项，鼠标移开后则隐藏这些选项。 首先，我们需要理解jQuery的选择器和...
四种css 伪类选择器
12-13
X:after  Example Source Code ：.clearfix:after {content: “”;display: block;clear: both;visibility: hidden;font-size: 0;height: 0;} .clearfix {*display: inline-block;...X:hover  Example S
纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存
11-17
当鼠标悬停在`.show-on-hover`上时，由于`.container:hover .hidden-div`的选择器匹配，`.hidden-div`的`display`属性变为`block`，从而使其显示。 如果需要处理多个并存的div，可以为每个div组合使用不同的类名，...
鼠标经过显示隐藏div
06-24
鼠标经过显示隐藏层js，隐藏层可加css样式，可随意控制大小，js有详细注释
Vue鼠标移入（悬停）显示-移出隐藏
ljw的博客
02-01 6001
需求：详情页面显示多张图片，当鼠标悬停在某张图片上时，图片上显示下载按钮；鼠标移出后，下载按钮隐藏。
关于display的一点疑问，一点心得
sujingyi2333的博客
02-11 358
首先发现搞不懂这个是因为写导航栏的时候。 如果去掉在<li>的<a>标签里去掉display:block，鼠标移上去，变颜色的时候只会变文本的背景部分（很小一点），加上了以后发现文本的那一大块都会变色。 其次，这个block只能放在<a>标签下而不能放在a:hover下，如果放在后者，文本一大块会变色，但是会向右错位，导航栏是左浮动的，所以推测是浮动的问题...
CSS中的display和visibility属性
CSDN_Boris的博客
11-04 652
display:none|block; display:none; 隐藏该html元素，确切的说，是在浏览器中消除该元素，不占屏幕的空间。若其下有其他元素，就会上移到该空间区域（好像桌子上有100块钱，现在我把它放在抽屉里藏起来，桌子上放100钱的地方可以放在其他任何东西）。 dispaly:block; 显示已经隐藏的html元素，如果别的元素占有了该空间时，他将下移，空间重新别原来
css 之:hover显示隐藏过渡
weixin_49511142的博客
02-22 326
问题： 使用opacity 进行隐藏后用hover显示会有一个问题，即 当鼠标放在已经隐藏的盒子的时候，hover也会触发。前言：我的需求是写一个盒子，鼠标移动上去显示一段文字，但是写完之后发现效果非常僵硬，效果很不好。用这个作为显示隐藏性能会好一些，但是用了这个效果会很僵硬。所以不能使用这个作为隐藏的方法。这个属性，将盒子透明化也是一种隐藏方式并且这个可以加入动画。于是乎完成了我想要的效果。为什么第一次写的时候hover过渡非常僵硬呢，因为用的是。
java script实现 :hover 的盒子现实与隐藏效果
周百万的博客
05-21 639
核心：运用javascript代码，实现鼠标经过ul标签显示，实现鼠标移走ul标签隐藏。 用html与css实现案例的外观 HTML代码（就是四个盒子里面包含a和ul,ul里面又包含li） <div class="nav"> <li> <a href="#">a</a> <ul> <li>1</li>
利用css的属性:hover显示与隐藏
qq_41893686的博客
02-19 1526
必须要一个父级节点(重要的) 1.设置center隐藏 2.鼠标移动到father，center显示（这时候，鼠标移动到top上，也就相当于移动到father上） 此方法依赖于父节点，若想要完全不依赖于父节点，可利用JS <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"...
如何使用不同样式选择器展示同一张图
09-17
如果想在不同样式选择器中展示同一张图片，你可以使用同一个 CSS 类来定义图片的样式，然后在不同的 HTML 元素中使用该类即可。 例如： ``` .example-image { width: 200px; height: 200px; background-image: url(example.jpg); } ``` 然后你可以在不同的 HTML 元素中使用这个类： ``` <div class="example-image"></div> <span class="example-image"></span> <p class="example-image"></p> ``` 这样，你就可以使用不同的样式选择器展示同一张图片了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值