Question

I am writing a javaScript program that has N number of Div’s and when ever mouse hovers over a particular div on the left of it there should be displayed a UP and DOWN button.

I tried taking two DIV’s. even when the mouseOver’s the second div the buttons are visible only on the left side of the First Div.

I want it left of the First DIV when mouse overs the First Div and left of the Second Div when the mouseOver’s the second Div…

Here is an example in jsfiddle:

http://jsfiddle.net/trendyteja/FtwTa/

How to fix this?

Answer 1

It’s pretty simple. Try this:

HTML

<div class='box'>
    <div class="actions">
        <a href="#">A1</a>
        <a href="#">A2</a>
    </div>
</div>
<div class='box'>
    <div class="actions">
        <a href="#">A1</a>
        <a href="#">A2</a>
    </div>
</div>

CSS

.box {
    width:200px;
    height:250px;
    border:1px solid #CCC;
    margin:20px;
    position:relative;
    float:left;
}
.box .actions {
    width:20px;
    background:#FFF;
    border:1px solid #CCC;
    display:none;
    position:absolute;
    left:-10px;
    top:10px;
    padding:6px;
}
.box:hover .actions { display:block;}

Here it is in action: http://jsfiddle.net/brenjt/JYXkk/