Question

我试图在<div>悬停时更改其内容。但是，在这样做时，我遇到的问题是选择没有下降。怎么纠正这个？ appendChild()方法可能会解决问题，但我只是尝试使用.innerHTML。

＆＃13;

<div id = "navigation" onmouseover = "navigationAnimate()">
Fun
</div>

<script>
function navigationAnimate() {
    navigation.innerHTML = "<select>  <option>Finance</option> <option>Health</option><option>Fun</option><option selected>Maths</option><option>Conveters</option><option>Chronology</option><option>Sciences</option><option>Miscellaneous</option></select>";
}
</script>

＆＃13;

Answer 1

问题是mouseover事件会为您抓住鼠标的孩子开火，并且每次都会更换孩子。基本上它一直在尝试使用它时一遍又一遍地替换孩子。

例如，如果您在第一个mouseover事件中删除事件侦听器，它将设置一次并完成。

＆＃13;

<div id = "navigation" onmouseover = "navigationAnimate()">
Fun
</div>

<script>
function navigationAnimate(){
    navigation.innerHTML = "<select>  <option>Finance</option> <option>Health</option><option>Fun</option><option selected>Maths</option><option>Conveters</option><option>Chronology</option><option>Sciences</option><option>Miscellaneous</option></select>";
    navigation.onmouseover = '';
}
</script>

＆＃13;

在旁注中，我建议使用addEventListener，而不是事件属性;它更加灵活。

Answer 2

`因为每次在 #navigation 块下移动光标时，都会更改内容。您需要删除属性＆＃34; onmouseover＆＃34;更改内容后;

<div id = "navigation" onmouseover = "navigationAnimate()">
Fun
</div>

<script>
function navigationAnimate(){

navigation.innerHTML = "<select>  <option>Finance</option> <option>Health</option><option>Fun</option><option selected>Maths</option><option>Conveters</option><option>Chronology</option><option>Sciences</option><option>Miscellaneous</option></select>";
navigation.removeAttribute('onmouseover');
}

</script>

https://jsfiddle.net/Lz49m7ko/

Answer 3

这里的问题是你调用javascript函数onMouseOver事件，这样当你的鼠标移动你的div或内容时它会不断调用该函数。

在这里，我尝试使用条件克服它并修改现有代码。希望它能为你效劳。祝你好运。

<div id="navigation" onmouseover="navigationAnimate();">
 Fun
</div>

<script>
var flag = true;
function navigationAnimate(){
 if(flag){
    flag = false;
    navigation.innerHTML = "<select><option>Finance</option> <option>Health</option><option>Fun</option><option selected>Maths</option><option>Conveters</option><option>Chronology</option><option>Sciences</option><option>Miscellaneous</option></select>";
    }
}
</script>

为什么选择不会下降？

3 个答案: