Question

鼠标滑过div让另外一个div从隐藏变为显示

第一个div id=“mysteve”
第二个div id=“add”
现在鼠标滑过mysteve我用css写的是#mysteve:hover {...} 改变了mysteve的一些属性，但是这样没法让add显示。
如果用javascript来写的话该怎么办呢？谢谢各位大神了!

Answer 1

1、给鼠标经过的DIV添加一个类 ，类名为submeau；如下图：

2、给显示或者隐藏的DIV，添加一个ID，ID名为:id="oa_submeau"，如下图：

3、将以下的JQUERY代码放在整个网页的最底部，用于控制鼠标经过显示DIV，离开隐藏DIV。

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">

$("#oa_submeau").hide();

$(".submeau").hover(function () {

$("#oa_submeau").show();

}, function () {

$("#oa_submeau").hide();

})

// 鼠标移动到list的div上的时候list div不会被隐藏

$("#oa_submeau").hover(function () {

$("#oa_submeau").show();

}, function () {

$("#oa_submeau").hide();

})

</script>，这样就可以实现鼠标经过某个区域时显示隐藏的DIV，离开时再次隐藏DIV。

Answer 2

如下代码可以实现 ：

<style>
	#mysteve {width:200px; height:30px; border:1px solid red;}
	#add {width:200px; height:30px; border:1px solid blue; display:none;}
</style>
<div id="mysteve">mysteve</div>
<div id="add">add</div>
<script>
	window.onload = function(){
		var ms = document.getElementById("mysteve");
		var add = document.getElementById("add");
		ms.onmouseover = function(){
			add.style.display = "block";
		};
		ms.onmouseout = function(){
			add.style.display = "none";
		};
	};
</script>

追问

我想另外写到一个单独的js文档里 怎么写？ 谢谢大神了

追答

见附件。