2

こんにちは<a>、タグを 1 つ取得し、ホバーすると別の 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

まず、タグの.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 に答える
1

これに従ってCSSスタイルを変更してください...

.tt {

height: 120px;

width: 100px;

background-color: fuchsia;

position:fixed;

top:30px;

left:12px;

 }

ワーキングデモ

于 2013-11-13T10:44:05.447 に答える