Move element over element where cursor is

Question

Move element over element where cursor is

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I have this code: I wanted '#hoverLayer' to move to one of the '#bts' ('# bt1', '# bt2', '# bt3', '# bt4') depending where the cursor is. Any ideas?

html:

<div id="bts">
    <div id="hoverLayer"></div>
    <div id="bt1"></div>
    <div id="bt2"></div>
    <div id="bt3"></div>
    <div id="bt4"></div>
</div>

css:

#hoverLayer {
    display: block;
    width: 155px;
    height: 50px;
    border: 2px solid green;
    position: absolute;
}
#bts {
    display: block;
    width: 620px;
    height: 50px;
    font-size: 0;
    position: absolute;
    z-index: 2;
    top: 30px;
    right: 0;
    cursor: pointer;
    left: 0;
    margin: auto;
}
#bt1, #bt2, #bt3, #bt4 {
    width: 155px;
    height: 100%;
    display: inline-block;
}

Js: this is what I did so far, grab the id of the hover element ... just need to grab its location (I have no idea how) and give '#hoverLayer' the same.

$('#bts div[id^="bt"]').mouseenter(function() {
    alert($(this).attr('id'));
})

jquery

asked by anonymous 07.10.2014 / 16:05

2 answers

0

Example with offset ()

    $('#bts div[id^="bt"]').mouseenter(function() {
      var offset = $( this ).offset();
      $("#hoverLayer").offset({ top: offset.top, left: offset.left });
    })

07.10.2014 / 16:49

ShellScript command 'cd' Using Napkin LookAndFeel

score 1 · Accepted Answer

You can achieve your goal as follows:

JSFiddle Example

$('#bts > div:not("#hoverLayer")').on('mouseenter', function() {
    $target = $(this);
    $('#hoverLayer').css({"left":$target.position().left});
});

Explanation

When the cursor is in the #bts element over a child element that is not #hoverLayer , we assign the CSS definition left of the element where the mouse is to the element we want to move.