如何执行div悬停显示另一个div但两个div是不同的形式？

Question

我已经创建了两个表单，一个表格具有div，其中div为“one”，第二个表单具有另一个div id为“two”。当div一个悬停时div二想要显示。我试过这样的事。

<form action="">
<div id="one">
<p>source of hover content</p>
</div>
</form>
<form action="">
<div id="two">
<p>destination of hover content</p>
</div>
</form>

在Css中：

#two{ 
    display: none;
}
#one:hover #two {
display: block;
}

Answer 1

在第一个show/hide悬停时使用div秒div使用以下脚本。

$(function(){
  $("#one,#two").hover(function(){
    $("#two").show();
  },function(){
    $("#two").hide();
  });        
});

请查看工作演示：

＆＃13;

＆＃13;

$(function(){
  $("#one,#two").hover(function(){
    $("#two").show();
  },function(){
    $("#two").hide();
  });        
});

＆＃13;

#two{ 
  display: none;
}
#one:hover #two {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <div id="one">
    <p>source of hover content</p>
  </div>
</form>
<form action="">
  <div id="two">
    <p>destination of hover content</p>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 2

var clr;
$(document).ready(function()
{
    $(function() {
        $("#one,#two").bind('mouseout', function(){
            clr = setTimeout( function(){$("#two").css("display", "none");} , 2000);
        })
    });
    $(function() {
        $("#one,#two").bind('mouseover', function(){
            clearTimeout(clr);
            $("#two").css("display", "block");          
        })
    });
});

＆＃13;

＆＃13;

var clr;
$(document).ready(function()
{
	$(function() {
		$("#one,#two").bind('mouseout', function(){
			clr = setTimeout( function(){$("#two").css("display", "none");} , 500);
		})
	});
	$(function() {
		$("#one,#two").bind('mouseover', function(){
			clearTimeout(clr);
			$("#two").css("display", "block");			
		})
	});
});

＆＃13;

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<form action="">
<div id="one" style="border: 1px solid #000; width:200px;padding:5px;">
<p>source of hover content</p>
</div>
</form>
<form action="">
<div id="two" style="border: 1px solid #000; width:200px;padding:5px;display:none;">
<p>destination of hover content</p>
</div>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 3

为每个表单提供一个ID 然后，您可以使用jQuery指定表单中的特定元素

<form id="form1" action="">
  <div id="one">
    <p>source of hover content</p>
  </div>
</form>
<form id="form2" action="">
  <div id="two">
    <p>destination of hover content</p>
  </div>
</form>

使用jQuery，您可以指定特定表单中的每个元素

$(document).ready(function() {
  $("#form2 #two").hide();
  $("#form1 #one").hover(function(){
  $("#form2 #two").show();
  });     
});

Answer 4

使用Element.style.display和Element.onmouseover＆amp;悬停事件Element.onmouseout

String.prototype.Tshow = function(s){
document.getElementById(this).style.display = s ? "block" : "none";
}


document.getElementById("one").onmouseover = function(){"two".Tshow(true)}

//to hide onmouseout
/*
document.getElementById("one").onmouseout = function(){"two".Tshow(false)}
*/

#two{ 
    display: none;
}
#one:hover{
display: block;
}

<form action="">
<div id="one">
<p>source of hover content</p>
</div>
</form>

<form action="">
<div id="two">
<p>destination of hover content</p>
</div>
</form>