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

Length of page is disturbed while hovering on images

本文关键字：干扰 悬停 鼠标 图像      更新时间：2023-09-26

我在我的网页上面临一个问题，当我在图像上悬停时，弹出框以一种很好的方式显示，但页面的长度受到干扰，这意味着页面长度得到泡状。我使用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>

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

你需要的是一些静态空白(一个空的垂直框)，足够大的div出现在。

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

相关文章：