Question

您好我已经使用了一个<a>标记，并在悬停时另外一个div打开。在标签下方我已经拍摄了其他显示的div。但当我将鼠标悬停在<a>标记上时，其他div会打开，但<a>标记下方的常规div会更改其位置并向下移动。所以我想要，虽然在<a>标签悬停时新的div打开，常规div不应该改变它的位置。新div应该打开或显示在现有div上。

jsfiddle Demo for it

我的代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Reading Image</title>
    <style type="text/css">
        .testtmpblock{
            display: none;
            background-color:black;
            min-height: 100px;
            width: 200px;

        }
        .tmpd{
            height: 100px;
            width: 100px;
            background-color: blue;
        }
        .tt{
            height: 120px;
            width: 100px;
            background-color: fuchsia;
            position: fixed;display: block;
        }
    </style>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script>

        $(document).ready(function () {
      $(document).on('mouseenter', '.cart', function () {


          $(this).next(".testtmpblock").show();
      }).on('mouseleave', '.cart', function () {
          $(this).next(".testtmpblock").hide();
      });
  });


    </script>
</head>
<body>
    <a href="#" class="cart"> Cart </a><div class="testtmpblock"></div>
    <div class="tt">hello</div>

</body>
</html>

有任何建议吗？

Answer 1

将position的{{1}}设置为.testtmpblock

absolute

演示http://jsfiddle.net/jXDBN/2/

Answer 2

首先，将.testtmpblock包裹在<a>标记内：

<a href="#" class="cart"> Cart <div class="testtmpblock"></div></a>
<div class="tt">hello</div>

然后绝对定位这个div：

.cart {
    position: relative;
}
.testtmpblock{
    display: none;
    background-color:black;
    min-height: 100px;
    width: 200px;
    position: absolute;
    left: 0;
    top: 0;
}
.tt{
    height: 120px;
    width: 100px;
    background-color: fuchsia;
    position: fixed;
    display: block;
}

Answer 3

根据此更改您的CSS样式......

.tt {

height: 120px;

width: 100px;

background-color: fuchsia;

position:fixed;

top:30px;

left:12px;

 }

WORKING DEMO

如何修复div的大小？

3 个答案: