在鼠標懸停/懸停替換文本與選擇標記

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>