javascript - 当鼠标悬停在这个形状上时，如何使标注窗口出现？

Question

我有这个 jsfiddle。

http://jsfiddle.net/helpme128/3kwwo53t/2/

<div ng-app="test" ng-controller="testCtrl">
    <div id="container">
        <div class="shape" ng-draggable='dragOptions'></div>
    </div>
</div>

我想在鼠标指针接触到白色方 block 时显示带有文本 "Callout" 的标注窗口。当鼠标离开白色方 block 时，标注窗口消失。如何才能做到这一点？是否有适合此任务的 angularjs 模块？

Answer 1

查看我制作的 fiddle ，仅 CSS: http://jsfiddle.net/3kwwo53t/16/

.shape::after{
    display:none;
    height: 50px;
    width: 50px;
    background-color:blue;
    content:'Callout';
    position:relative;
    left:20px;
}
.shape:hover::after{
    display:block;
}

编辑:

Angular 方式:http://jsfiddle.net/3kwwo53t/18/

您可以使用拖动选项更改文本