Question

当鼠标悬停在屏幕右侧时，我已经给出了2个从屏幕右侧滑出的div。一个div包含一个图像，另一个包含很少的标签和文本框。我已将两个div推向右侧，以便只显示我图像中的反馈字母。我的问题是当在不同的监视器中查看该站点时，div不是我之前定位它们的位置。它只是在不同的监视器中随机移动。请帮忙。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body style="overflow-y: hidden">            


   <div id="slideout">![my outer div][1]

      <img src="images/feedback_R.png" height="500px" width="800px" alt="Feedback" >
  <div id="slideout_inner">
     My Content goes here..
        </div>
</div>
    </body>
</html>

这是我使用的CSS样式。

<style>
#slideout {
  position: fixed;
  top: 50px;
  left: 1300px;
  z-index: 5000;
  -webkit-transition-duration: 0.9s;
  -moz-transition-duration: 0.9s;
  -o-transition-duration: 0.9s;
  transition-duration: 0.9s;
}
#slideout_inner {
  position: fixed;
  top: 180px;
  z-index: 9999 ;
  left: 1400px;
  -webkit-transition-duration: 0.9s;
  -moz-transition-duration: 0.9s;
  -o-transition-duration: 0.9s;
  transition-duration: 0.9s;
  text-align: center;
  cursor: pointer;
}
#slideout_inner textarea {
            width: 190px;
            height: 100px;
            margin-bottom: 6px;
        }
#slideout:hover {
  left: 800px;
}
#slideout:hover #slideout_inner {
  left: 900px;
}
</style>

Answer 1

使用px除了使用媒体查询之外，您无法将这些图像修复为所有屏幕尺寸或者你可以使用0 px onload制作图像，并且在悬停时你可以像这样增加到800px：对于前：使用这种风格

 #slideout {
            position: fixed;
            top: 50px;
            z-index: 5000;
            right: 0px;
            -webkit-transition-duration: 0.9s;
            -moz-transition-duration: 0.9s;
            -o-transition-duration: 0.9s;
            transition-duration: 0.9s;
        }
  #slideout:hover img{
            width: 100%;
        }

  img{
            width: 0px;
            float: right;
            -webkit-transition-duration: 0.9s;
            -moz-transition-duration: 0.9s;
            -o-transition-duration: 0.9s;
            transition-duration: 0.9s;
        }

此样式在所有屏幕尺寸悬停时将图像宽度增加到100％，如果您对此有所帮助，也可将其应用于反馈内容

如何阻止我的反馈Div停止更改屏幕分辨率的位置？

1 个答案: