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

【问题标题】：how to perform div hover shows another div but both div's are different form?如何执行 div 悬停显示另一个 div 但两个 div 的形式不同？
【发布时间】：2016-10-24 06:26:34
【问题描述】：

我创建了两种形式，一种具有 div 的 div id 为“one”的表单，第二种形式的另一个 div id 为“two”。当 div 1 悬停时，div 2 想要显示。我试过这样。

<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;
}

【问题讨论】：

@danny3b 是否可以在 jquery 中做，两者都是不同的形式

标签： javascript jquery html css forms

【解决方案1】：

到show/hide 第二个div 悬停在第一个div 上，使用下面的脚本。

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

请查看工作演示：

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

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

<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>

【讨论】：

感谢它的工作。但我的第二个内容不可见。当我发出警报时，它的内容只不可见

【解决方案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");          
        })
    });
});

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");			
		})
	});
});

<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>

【讨论】：

【解决方案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();
  });     
});

【讨论】：

【解决方案4】：

纯 JavaScript 并在所有浏览器中均受支持使用 Element.style.display 和 Element.onmouseover 和 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>

【讨论】：