在鼠标悬停/悬停替换文本与选择标记

Question

当悬停或onmouseover文本时，我如何用选择标记（下拉）替换文本（例如在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>