在鼠标悬停/悬停时用 select 标签替换文本

Question

当悬停或鼠标悬停在文本上时，如何用 select 标签（下拉菜单）替换文本（例如，在 div 标签中）？

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

<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 到 hide/show

$(".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>

在鼠标悬停/悬停时用 select 标签替换文本

On mouseover / hover replace text with select tag

javascript

jquery

onmouseover

hover