как выполнить наведение на div, показывает другой div, но оба div имеют разную форму?

#javascript #jquery #html #css #forms

#javascript #jquery #HTML #css #формы

Вопрос:

я создал две формы, в одной из которых идентификатор div равен «один», во второй форме другой идентификатор div равен «два».При наведении курсора на div one требуется отобразить div two. я пробовал так.

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

Ответ №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>

Expand snippet

Ответ №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:

Дайте идентификатор каждой из ваших форм, затем вы можете использовать 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 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>