2017-02-09 72 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查看更新。 –