2

嗨，我已经拿了一个<a>标签，在它悬停时，另一个 div 会打开。在标签下方，我采用了其他显示的 div。但是当我将鼠标悬停在<a>标签上时，其他 div 会打开，但<a>标签下方的常规 div 会更改它的位置并移到下方。所以我希望虽然在<a>标签新 div 悬停时打开常规 div 不应该改变它的位置。新 div 应该打开或显示在现有 div 上。

jsfiddle 演示它

我的代码：

<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>

有什么建议吗？

4

3 回答 3

5

设置position为.testtmpblock_absolute

.testtmpblock{
        display: none;
        background-color:black;
        min-height: 100px;
        width: 200px;
        position:absolute;
    }

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

于 2013-11-13T10:37:00.487 回答
1

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

.tt {

height: 120px;

width: 100px;

background-color: fuchsia;

position:fixed;

top:30px;

left:12px;

 }

工作演示

于 2013-11-13T10:44:05.447 回答
1

首先，将标签.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;
}
于 2013-11-13T10:37:59.970 回答