CODEWITHSUNDEEP
jquerycss
user3142695
user3142695

Reputation: 17342

Set the position of a new element, while hovering an element

I want to show a small menu (arrow_box) when the user moves the mouse over an element.

<div class="wrap">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>

<div class="arrow_box"></div>

.arrow_box {
    position: relative;
    background: #88b7d5;
    border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #88b7d5;
    border-width: 30px;
    margin-top: -30px;
}
.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-left-color: #c2e1f5;
    border-width: 36px;
    margin-top: -36px;
}

JSFiddle: http://jsfiddle.net/gpxfm6es/

This menu sho should be placed in the left space between two elements. So first of all I got a CSS issue: How can I place the menu between two elements at the left borders of them so that the arrow points to the space between these two elements?

The second issue (JS) how to get this menu always between the hovered element and the one below that.

$( ".element" ).mouseover(function() {
  $( ".wrap" ).append( '<div class="arrow_box"></div>' ).css({top: , left: });
});

Upvotes: 0

Views: 1076

Answers (1)

zfrisch
zfrisch

Reputation: 8660

http://jsfiddle.net/b1gpd1n1/

I used the jquery .hover(mouseIn, mouseOut) and the .offset() methods for this example.

.hover():

$("elem").hover(function(){
//do when mouse comes in
}, 
function() { 
// do when mouse goes out
});

and .offset():

var position = $("elem").offset();
//position is now an object that can return
// the css left of an element position.left
// the css top of an element position.top

Edit: As a side note .offset() and .position() work virtually the same. .position() gives you the RELATIVE position of the element within it's parent. .offset() gives you the ABSOLUTE position within the document. That's why in the example arrow_box has a position of absolute.

Upvotes: 2

Related Questions