Question

我在网页上遇到问题，当我将鼠标悬停在图片上时，弹出窗口显示效果很好，但页面长度受到干扰，这意味着页面长度会冒泡。我正在使用javascript完成此任务。以下是代码;您的建议将不胜感激：

<script>
function showfunction(id) {
    //alert(id);
    //document.getElementById(id).style.display="block";
    $("#" + id).css('display', 'block');
}

function hidefunction(id) {
    //alert(id);
    //document.getElementById(id).style.display="none";
    $("#" + id).css('display', 'none');
    //alert(a);
}
</script>

这是html代码，图像以内联方式显示：

<body>
    <ul style="list-style-type:none; width:647px; margin-top:-37px;">
        <li class="new_hire_list">
            <img class="grayscale" onmouseover="showfunction('div1')" onmouseout="hidefunction('div1')" src="images/pro_management.jpg" />
        </li>
        <li class="new_hire_list">
            <img class="grayscale" onmouseover="showfunction('div2')" onmouseout="hidefunction('div2')" src="images/commun.jpg" />
        </li>
    </ul>
</body>

以下是在图像悬停时显示的div：

<div id="div1" onmouseover="showfunction('div1')" onmouseout="hidefunction('div1')" class="content" style="">
    <span style="font-size:11px; color:#000000;">
        barun LoremIpsum dolor sit amet 
        LoremIpsum dolor sit ametLoremIpsum dolor sit ametLoremIpsum dolor sit
        ametLoremIpsum dolor sit ametLoremIpsum dolor sit ametLoremIpsum dolor sit        
        ametLoremIpsum dolor sit ametLoremIpsum dolor sit ametLoremIpsum dolor
 sit
    </span>
    <br/>
    <img src="images/More_details.jpg" />
 </div>
 <div id="div2" onmouseover="showfunction('div2')" onmouseout="hidefunction('div2')" class="content">
    <span style="font-size:11px; color:#000000;">
        LoremIpsum dolor sit amet LoremIpsum dolor sit
        ametLoremIpsum dolor sit ametLoremIpsum dolor sit ametLoremIpsum dolor sit
        ametLoremIpsum dolor sit ametLoremIpsum dolor sit ametLoremIpsum dolor sit
        ametLoremIpsum dolor sit ametLoremIpsum dolor sit
    </span>
    <br/>
    <img src="images/More_details.jpg" />
</div>

Answer 1

div是页面长度的一部分。如果您显示/隐藏它们，浏览器会调整页面大小。

你需要的是一些静态空格（一个空的垂直框），大到足以让div出现。

一个简单的解决方案是将信息div包装在<div style="height: 200px;">...</div>中。

这不会改变，页面也不会跳转。

将鼠标悬停在图像上时，页面长度会受到干扰

1 个答案: