css hover显示隐藏div，css鼠标经过其他div隐藏
老铁们，大家好，相信还有很多朋友对于css hover显示隐藏div和css鼠标经过其他div隐藏的相关问题不太懂，没关系，今天就由我来为大家分享分享css hover显示隐藏div以及css鼠标经过其他div隐藏的问题，文章篇幅可能偏长，希望可以帮助到大家，下面一起来看看吧！
css中display怎么做显示或隐藏
display：none可以隐藏某个元素，且隐藏的元素不会占用任何空间。该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
display：block可以显示一个块元素，或者display：inline是显示一个内联元素。
display主要用的CSS样式有以下三个：
display:block——显示为块级元素。
display:inline——显示为内联元素。
display:inline-block——显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性。
扩展资料：
显示的块级元素(block)特性：总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
显示的内联元素(inline)特性：和相邻的内联元素在同一行;宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
块级元素主要有：address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul, li等css属性。
内联元素主要有：a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup,textarea, tt, u, var等css属性。
div标签如何显示和隐藏
通过css伪类中的“hover”来实现。
1、新建html文件，在body标签中添加一个div标签，div标签里面嵌套一个p标签，然后添加p标签内容，这里以“演示文本”为例：
2、在head标签中添加style标签，然后在style标签中给p标签设置预先显示样式，预先是先不显示的，所以给p标签设置的属性代码是“p{display: none;}”；再给div设置宽和高，这里为了演示方便，为div设置一个灰色的背景色，代码为“div{width: 100px; height: 100px; background:#ccc;}”：
3、给div标签添加hover伪类，然后打出一个空格，再设置此时p标签的显示样式。代码为“div:hover p{display: block;}”，这段代码的意思是，当鼠标放在div上时，将p标签的显示状态从隐藏改成显示，此时p标签中的文字就会显示出来：
4、当鼠标从div移走时，文字就会消失：
如何通过css选择器隐藏特定元素
通过CSS选择器隐藏特定元素的核心方法是使用 display: none（彻底隐藏且不占空间）或 visibility: hidden（隐藏但保留空间），并结合 class、id、属性选择器或伪类精准定位目标。以下是具体实现方式：
一、使用 display: none彻底隐藏元素元素完全从布局中移除，不占据任何空间，且不响应交互。
通过class选择器隐藏.ad-banner{ display: none;/*隐藏所有class为"ad-banner"的元素*/}通过id选择器隐藏#header{ display: none;/*隐藏id为"header"的元素*/}通过标签选择器隐藏特定位置的元素p:last-child{ display: none;/*隐藏所有p标签中的最后一个子元素*/}二、根据属性选择器隐藏元素通过元素的属性（如 data-testid、src）精准定位目标。
隐藏特定属性值的元素[data-testid="popup"]{ display: none;/*隐藏data-testid属性值为"popup"的元素*/}隐藏属性包含特定关键词的元素img[src*="ads"]{ display: none;/*隐藏src属性包含"ads"的img元素*/}三、结合伪类隐藏符合条件的元素利用伪类按位置、状态或排除条件选择元素。
按位置隐藏子元素li:nth-child(2){ display: none;/*隐藏列表中的第二个li元素*/}交互时隐藏元素.card:hover.tooltip{ display: none;/*鼠标悬停在.card上时隐藏其内部的.tooltip元素*/}排除特定元素后隐藏其余div:not(.keep){ display: none;/*隐藏所有class不为"keep"的div元素*/}四、使用 visibility: hidden隐藏但保留空间元素不可见，但仍占据布局空间，不影响文档流。
.invisible-element{ visibility: hidden;/*隐藏元素但保留其位置*/}五、选择方法的依据是否需要保留空间：不保留空间→ display: none
保留空间→ visibility: hidden
选择条件的复杂度：简单定位（如class/id）→直接使用对应选择器
精准定位（如属性、位置、状态）→结合属性选择器或伪类
示例汇总/* 1.隐藏class为"ads"的元素*/.ads{ display: none;}/* 2.隐藏id为"footer-ad"的元素*/#footer-ad{ display: none;}/* 3.隐藏所有data-role="banner"的div*/div[data-role="banner"]{ display: none;}/* 4.隐藏表格中第3行的td*/tr:nth-child(3) td{ display: none;}/* 5.隐藏非活动状态的选项卡*/.tab:not(.active){ visibility: hidden;}通过灵活组合CSS选择器和显示属性，可以精准控制页面元素的可见性，适应不同布局需求。
好了，本文到此结束，如果可以帮助到大家，还望关注本站哦！