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隐藏/显示

＆＃13;

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

＆＃13;

.hide{
  display : none;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: