Question

onmouseover，onmouseout javascript无法在google chrome.properly在mozila工作。

<script type="text/javascript">
function toggleMe(id) {
    var image = document.getElementById(id);
    if(id.style.display == "block") {
        id.style.display = "none";
    } else {
        id.style.display = "block";
    }
}
</script>

<div onmouseover="toggleMe(<?php echo "I".$id; ?>)" onmouseout="toggleMe(<?php echo "I".$id; ?>)">
    <?php echo $result_v['model_name']; ?>
</div>
<img src="<?php echo $result_v['image']; ?>" alt="<?php echo $result_v['model_name']; ?>" id="<?php echo "I".$id; ?>" class="imagebox" />

Answer 1

两个问题，在对函数的调用中不带引号的字符串。像这样修复......

<div onmouseover="toggleMe('I<?= $id ?>')"...
<!-- note the quotes       ^           ^ -->

其次，您在函数中使用了错误的引用来访问style属性。它应该是image，即

if(image.style.display == "block") {
    image.style.display = "none";
} else {
    image.style.display = "block";
}

所有这些，我只是使用数据属性而不是将字符串注入JavaScript函数......

<div data-image="I<?= $id ?>" onmouseover="toggleMe(this)"...

和功能

function toggleMe(trigger) {
    var image = document.getElementById(trigger.getAttribute('data-image'));
    image.style.display = image.style.display == 'block' ? 'none' : 'block';
}

onmouseover，onmouseout javascript无法使用谷歌浏览器

1 个答案: