javascript - 鼠标悬停/悬停时用选择标签替换文本

Question

当鼠标悬停或鼠标悬停在文本上时，如何用选择标记(下拉列表)替换文本(例如，div 标记中的文本)？

我尝试使用innerHTML 的方式创建了一个选择元素，但单击时它不会展开:

<div id="status" onmouseover="document.getElementById('status')
.innerHTML='<select><option>1</option><option>1</option></select>';">
This is a test
</div>

Answer 1

尝试使用 jQuery .hover 和 toggleClass 来隐藏/显示

$(".name, .name_choice").hover(function(){
  $(".name, .name_choice").toggleClass("hide");
});
$(".name_choice").change(function(){
  $(".name").html($(this).val());
});

.hide{
  display : none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="name">Select Name</div>
  <div>
    <select class="name_choice hide">
      <option>Niklesh</option>
      <option>Atul</option>
      <option>Sachin</option>
    </select>
  </div>
</div>