Question

当用户将鼠标移到元素上时，我想显示一个小菜单（arrow_box）。

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

此菜单应放在两个元素之间的左侧空格中。首先，我遇到了一个CSS问题：如何将菜单放在它们左边界的两个元素之间，以便箭头指向这两个元素之间的空间？

第二个问题（JS）如何在hovered元素和下面的元素之间始终获得此菜单。

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

Answer 1

http://jsfiddle.net/b1gpd1n1/

我在这个例子中使用了jquery .hover（mouseIn，mouseOut）和.offset（）方法。

.hover（）：

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

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

编辑：作为旁注，.offset（）和.position（）的工作方式基本相同。 .position（）为您提供元素在其父级中的RELATIVE位置。 .offset（）为您提供文档中的ABSOLUTE位置。这就是为什么在示例中arrow_box的位置是绝对的。

在悬停元素时设置新元素的位置

1 个答案: