html 通用兄弟选择器,html – ：hover命令不适用于一般的兄弟选择器

最新推荐文章于 2021-10-20 08:58:31 发布

文艺范儿老清新

最新推荐文章于 2021-10-20 08:58:31 发布

阅读量183

点赞数

文章标签： html 通用兄弟选择器

该博客探讨了一种CSS技术，即通过使用通用兄弟选择器(~)来实现在悬停状态下改变元素显示的方式。具体场景是当鼠标悬停在.buttons类元素上时，使得ID为'Inicio'的div元素消失。CSS代码中定义了相应的样式，包括字体大小变化的过渡效果。此技术对于创建响应式网页设计和交互元素特别有用。

摘要由CSDN通过智能技术生成

我正在尝试在悬停div类时更改显示.这个想法是让一个div在盘旋另一个时消失.我尝试使用通用兄弟选择器使显示从内联更改为无. CSS如下：

#Inicio {width: 100%;

height: 100%;

background-color: yellow;

position: absolute;

display: inline;

}

.buttons:hover ~ #Inicio {display: none;}

.buttons {width: 80%;

margin-left: auto;

margin-right: auto;

position: static;

margin-left: 10%;

font-size: 22px;

border-top: 1px solid white;

padding-top: 20px;

padding-bottom: 20px; }

.buttons:hover {font-size: 24px;

transition: all .5s ;}

和HTML：