鼠标滑过某div出现另一被隐藏div的常见写法:display属性

最新推荐文章于 2023-05-08 16:04:56 发布

原创最新推荐文章于 2023-05-08 16:04:56 发布 · 2.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #js #display

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用CSS和JavaScript来控制网页元素的显示状态。通过两种方式实现鼠标悬停时元素的显示与隐藏：一是利用JavaScript改变元素的display属性；二是通过CSS选择器结合:hover伪类实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

display属性：
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。（较适用于ab不同时显示）
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。（适用于ab同时显示）
inline-block 行内块元素。（CSS2.1 新增的值）

1、利用js函数，实现滑在b上，a由隐藏变显示

<!DOCTYPE html>
<div class='a' id='a' style="display:none">a is hidden</div><br/>
<div class='b' id='b'  onmouseover="mover();" onmouseout="mout();">b is show</div>

<script type="text/javascript">
function mover() {
	document.getElementById('a').style.display='inline'; 
}
function mout() {
	document.getElementById('a').style.display='none'; 
}
</script>

</html>

页面效果：
鼠标滑过前：
b is show
滑过时：
a is hidden
b is show

2、利用css样式，实现滑在b（实际是c）上，b变成a

<!DOCTYPE html>

<style type="text/css">
.a{display:none;}
.c:hover .a{display:block;}
.c:hover .b{display:none;}
</style>

<li class="c">
<div class='a' >a is hidden</div>
<div class='b'>b is show</div>
</li>
</html>

页面效果：
鼠标滑过前：b is show
滑过时：a is hidden