2017-02-09 82 views
0

我还在学习jQuery和我有一个小麻烦的工作出了什么我需要做的......我需要有一个地图上的标记,当你翻身他们,他们表现出的信息。所以,我有两个问题,我不知道的:显示DIV悬停使用jQuery

1)你怎么又来使DIV隐藏悬停被释放时? 2)如何编写代码,以便父代的div是唯一一个可以打开的代码,而不是所有的代码?

$(function() { 
 
$(".block").hover(function(){ 
 
\t $('.popup').show(); 
 
\t }); 
 
});
\t .wrapper { 
 
\t \t width: 800px; 
 
\t \t height: 600px; 
 
\t \t position: relative; 
 
\t \t background-color: #efefef; 
 
\t \t margin: 0 auto; 
 
\t } 
 

 
\t .block { 
 
\t \t width: 40px; 
 
\t \t height: 40px; 
 
\t \t border-radius: 20px; 
 
\t \t background-color: #8E2729; 
 
\t \t border:2px solid #fff; 
 
\t \t cursor: pointer; 
 
\t } 
 
\t 
 
\t .block:hover{ 
 
    \t \t background-color: #5151B7; 
 
\t } 
 
\t 
 
\t .block-1 { 
 
\t \t position: absolute; 
 
\t \t top: 250px; 
 
\t \t left: 130px; 
 
\t } 
 
\t 
 
\t .block-2 { 
 
\t \t position: absolute; 
 
\t \t top: 60px; 
 
\t \t left: 500px; 
 
\t } 
 
\t 
 
\t .block-3 { 
 
\t \t position: absolute; 
 
\t \t top: 40px; 
 
\t \t left: 100px; 
 
\t } 
 
\t 
 
\t .popup { 
 
\t \t box-sizing: border-box; 
 
\t \t padding: 30px; 
 
\t \t background-color: #4E4E4E; 
 
\t \t display: none; 
 
\t \t width: 300px; 
 
\t \t position: absolute; 
 
\t \t top: 50px; 
 
\t \t left: -80px; 
 
\t }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 

 
\t <div class="block block-1"> 
 
\t \t <div class="popup">This is some popup text for block 1</div> 
 
\t </div> 
 
\t 
 
\t <div class="block block-2"> 
 
\t \t <div class="popup">This is some popup text for block 2</div> 
 
\t </div> 
 
\t 
 
\t <div class="block block-3"> 
 
\t \t <div class="popup">This is some popup text for block 3</div> 
 
\t </div> 
 

 
</div>

+0

我刚刚制定了隐藏释放 - 改变 '秀' 到 '切换'。我假设那是正确的?所以它只是使它只能打开孩子的div我需要... – DaveP19

回答

1

使用childern() method.The children()方法返回选定element.Define二元函数的所有直接孩子hover() method.The hover()法规定了两种功能,当鼠标指针悬停在运行所选elements.This方法触发两个mouseentermouseleave事件。

$(function() { 
$(".block").hover(function(){ 
    $(this).children('.popup').show(); 
    },function(){ 
    $(this).children('.popup').hide(); 
    }); 
}); 

$(function() { 
 
$(".block").hover(function(){ 
 
\t $(this).children('.popup').show(); 
 
\t },function(){ 
 
    $(this).children('.popup').hide(); 
 
    }); 
 
});
.wrapper { 
 
\t \t width: 800px; 
 
\t \t height: 600px; 
 
\t \t position: relative; 
 
\t \t background-color: #efefef; 
 
\t \t margin: 0 auto; 
 
\t } 
 

 
\t .block { 
 
\t \t width: 40px; 
 
\t \t height: 40px; 
 
\t \t border-radius: 20px; 
 
\t \t background-color: #8E2729; 
 
\t \t border:2px solid #fff; 
 
\t \t cursor: pointer; 
 
\t } 
 
\t 
 
\t .block:hover{ 
 
    \t \t background-color: #5151B7; 
 
\t } 
 
\t 
 
\t .block-1 { 
 
\t \t position: absolute; 
 
\t \t top: 250px; 
 
\t \t left: 130px; 
 
\t } 
 
\t 
 
\t .block-2 { 
 
\t \t position: absolute; 
 
\t \t top: 60px; 
 
\t \t left: 500px; 
 
\t } 
 
\t 
 
\t .block-3 { 
 
\t \t position: absolute; 
 
\t \t top: 40px; 
 
\t \t left: 100px; 
 
\t } 
 
\t 
 
\t .popup { 
 
\t \t box-sizing: border-box; 
 
\t \t padding: 30px; 
 
\t \t background-color: #4E4E4E; 
 
\t \t display: none; 
 
\t \t width: 300px; 
 
\t \t position: absolute; 
 
\t \t top: 50px; 
 
\t \t left: -80px; 
 
\t }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 

 
\t <div class="block block-1"> 
 
\t \t <div class="popup">This is some popup text for block 1</div> 
 
\t </div> 
 
\t 
 
\t <div class="block block-2"> 
 
\t \t <div class="popup">This is some popup text for block 2</div> 
 
\t </div> 
 
\t 
 
\t <div class="block block-3"> 
 
\t \t <div class="popup">This is some popup text for block 3</div> 
 
\t </div> 
 

 
</div>

见小提琴这里JS Fiddle

+0

完美的帮助。谢谢。 – DaveP19

0

使用toggle而不是show和准格内find弹出。

$(function() { 
 
$(".block").hover(function(){ 
 
\t $(this).find('.popup').toggle(); 
 
\t }); 
 
});
\t .wrapper { 
 
\t \t width: 800px; 
 
\t \t height: 600px; 
 
\t \t position: relative; 
 
\t \t background-color: #efefef; 
 
\t \t margin: 0 auto; 
 
\t } 
 

 
\t .block { 
 
\t \t width: 40px; 
 
\t \t height: 40px; 
 
\t \t border-radius: 20px; 
 
\t \t background-color: #8E2729; 
 
\t \t border:2px solid #fff; 
 
\t \t cursor: pointer; 
 
\t } 
 
\t 
 
\t .block:hover{ 
 
    \t \t background-color: #5151B7; 
 
\t } 
 
\t 
 
\t .block-1 { 
 
\t \t position: absolute; 
 
\t \t top: 250px; 
 
\t \t left: 130px; 
 
\t } 
 
\t 
 
\t .block-2 { 
 
\t \t position: absolute; 
 
\t \t top: 60px; 
 
\t \t left: 500px; 
 
\t } 
 
\t 
 
\t .block-3 { 
 
\t \t position: absolute; 
 
\t \t top: 40px; 
 
\t \t left: 100px; 
 
\t } 
 
\t 
 
\t .popup { 
 
\t \t box-sizing: border-box; 
 
\t \t padding: 30px; 
 
\t \t background-color: #4E4E4E; 
 
\t \t display: none; 
 
\t \t width: 300px; 
 
\t \t position: absolute; 
 
\t \t top: 50px; 
 
\t \t left: -80px; 
 
\t }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 

 
\t <div class="block block-1"> 
 
\t \t <div class="popup">This is some popup text for block 1</div> 
 
\t </div> 
 
\t 
 
\t <div class="block block-2"> 
 
\t \t <div class="popup">This is some popup text for block 2</div> 
 
\t </div> 
 
\t 
 
\t <div class="block block-3"> 
 
\t \t <div class="popup">This is some popup text for block 3</div> 
 
\t </div> 
 

 
</div>

+0

使用find查看更新。 –