onmouse实现鼠标悬停内容显示及隐藏

最新推荐文章于 2024-03-16 15:29:40 发布

扶公瑾以苏

最新推荐文章于 2024-03-16 15:29:40 发布

阅读量7.2k

点赞数 9

分类专栏： javaScript 文章标签： JavaScript 鼠标悬停内容显现 onmouse

本文链接：https://blog.csdn.net/qq_36470686/article/details/82937265

版权

javaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

先上代码：

<html>
   <head>
		<title>js操作</title>
		<style>
			.div_in{
				width:330px;
				height:165px;
			}
			.div_in2{
				width:321px;
				height:20px;
				padding:18px 0 17px 0;
				line-height:22px;
				font-size:14px;
				border: 1px solid rgb(234, 238, 237);
			} 

			.div_meau1{
				display:inline-block;
				padding-left:15px;
				font-size:18px;
				font-weight:500;
				padding:0 8px;
				vertical-align:top; 

			}
			.div_meau2{
				margin:0 5px 5px 0;
				padding:0 8px;
				display:inline-block;
				vertical-align:top; 
			}
			.div_tag1{
				width:200px;
				height:400px;
				margin-top:-50px;
				margin-left:322px;
				border: 1px solid rgb(234, 238, 237);
				display:none;
			}
		</style>
		<script type="text/javascript">
			function myClickshow(one){
				var event=document.getElementById(one);
				event.style.display="block";
			}
			function myClickhide(one){
				var event=document.getElementById(one);
				event.style.display="none";
			}
		</script>
   </head>
	<body>
		<div class="div_in">
			<div class="div_in2" onmouseout="myClickhide('one1')" onmouseover="myClickshow('one1')">
				<div class="div_meau1">技术</div>
				<div class="div_meau2">Java</div>
				<div class="div_meau2">PHP</div>
				<div class="div_meau2">C++</div>
				<div class="div_meau2" style="margin-left:10px;">区块链</div>
				<img src="logo.png" />

			   <div id="one1"  class="div_tag1">
					<div style="padding-left:15px;font-size:18px;font-weight:500;padding:5 8px;">后端开发</div>
					<div class="div_meau2">Java</div>
					<div class="div_meau2">PHP</div>
					<div class="div_meau2">C++</div>
					<div class="div_meau2">C#</div>
					<div class="div_meau2">数据挖掘</div>
			   </div>
			</div>
		</div>
	</body>
</html>

效果图：

未将鼠标移至块上：

将鼠标移至块上：

div关键代码：
<div id="one1"  class="div_tag1" onmouseout="myClickhide('one2')" onmouseover="myClickshow('one2')">
当有鼠标放置在该div上时，调用myClickshow()函数。当鼠标离开该div上时，调用myClickhide()函数。

script关键代码：
                <script type="text/javascript">
			function myClickshow(one){
				var event=document.getElementById(one);
				event.style.display="block";
			}
			function myClickhide(one){
				var event=document.getElementById(one);
				event.style.display="none";
			}
		</script>
myClickshow接受传递的参数one，调用getElementById()方法，得到div的拷贝，指向真正的div块。更改div的display属性为 block ，即可显现出来。

myClickhide接受传递的参数one，调用getElementById()方法，得到div的拷贝，指向真正的div块。更改div的display属性为 none ，即可隐藏。

扶公瑾以苏

关注

9
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
onmouse实现鼠标悬停内容显示及隐藏

先上代码：&lt;html&gt; &lt;head&gt; &lt;title&gt;js操作&lt;/title&gt; &lt;style&gt; .div_in{ width:330px; height:165px; } .div_in2{ width:321px; height:20px; padding:18...
复制链接

扫一扫