jquery - 保持 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 时保持其显示？每次我尝试单击它时，它都会再次隐藏，我希望能够将鼠标按住在上面。

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>