CODEWITHSUNDEEP
csshtml
Java Curious ღ
Java Curious ღ

Reputation: 3692

How to fix the size of div?

Hi i have taken one <a> tag and on hover of it one other div opens. and below tag i have taken other div which display. but when I hover mouse on <a> tag other div opens but the regular div below the <a> tag change it's location and went below. so I want that although on hover of <a> tag new div opens the regular div should not change it's position. The new div should be open or display on existing div.

jsfiddle Demo for it

My code :

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

Any suggestion to do so ?

Upvotes: 2

Views: 167

Answers (3)

Sindhu
Sindhu

Reputation: 473

Change your CSS style according to this...

.tt {

height: 120px;

width: 100px;

background-color: fuchsia;

position:fixed;

top:30px;

left:12px;

 }

WORKING DEMO

Upvotes: 1

matewka
matewka

Reputation: 10148

First, wrap the .testtmpblock inside the <a> tag:

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

Then position this div absolutely:

.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;
}

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195971

Set the position of the .testtmpblock to absolute

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

demo at http://jsfiddle.net/jXDBN/2/

Upvotes: 5

Related Questions