保持顯示一個div，除非我點擊任何東西出來的

Question

$('#input').focus(function() { 
 
    $('#div').show(); 
 
}).blur(function(){ 
 
    $('#div').hide(); 
 
})

#div { 
 
display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='text' id='input'> 
 
<div id='div'><a href='www.domain.com'>Don't Forget to check the rules.<a></div>

在這裏我的代碼，我試圖展現一個div聚焦時，卻隱藏着它，而不是集中

哪有我點擊它時會顯示div嗎？每次我嘗試點擊它時，它都會再次隱藏，我想讓其上的鼠標可以上hold。

Answer 1

也許是這樣的。

#div { 
 
    opacity: 0; 
 
} 
 

 
#input:focus + #div { 
 
    opacity: 1; 
 
} 
 

 
#div:hover { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='text' id='input'> 
 
<div id='div'> 
 
    <a href='www.domain.com'>Don't Forget to check the rules.</a> 
 
</div>

Answer 2

試試這個：

$('#input').focus(function() { 
    $('#div').show(); 
}).blur(function(){ 
    setTimeout(function() { 
    $('#div').hide(); 
}, 200); 
})