https://plnkr.co/edit/PuP3f71kCjkqgjjMkgNS?p=preview https://plnkr.co/edit/PuP3f71kCjkqgjjMkgNS?p=preview|下面还有一个 stackoverflow 片段。
不滚动标签悬停将正确显示：
我认为问题是因为我有一个fixed在 tagHovers 上设置的位置tags-modal班级。不过我需要fixed该 div 上的位置，以便 tagHovers 可以突破.tags-container.
有没有另一种方法可以实现这种效果，而不必重新设计 tagHovers 的样式，以便它们必须适合较小的宽度尺寸tags-column?
Correct position without scrolling
Once you scroll, position of the fixed tagHover breaks
然而，一旦我开始滚动，tagHovers 就会失去与您悬停的标签的相对位置。
.tags-container其中有一个overflow-y: auto;来显示滚动。
每个标签都有一个关联的tag-hover指示。
tagHovers 具有这种样式（因此它们可以显示在标签列的约束之外。）
https://gist.github.com/leongaban/eb2988a1ff01ada78ea0f663fd0432a8 https://gist.github.com/leongaban/eb2988a1ff01ada78ea0f663fd0432a8
<section class="tags-modal" ng-show="tghov.tag.hoverDisplay" ng-mouseleave="tghov.leave()">
<h1>Hover for: {{ tghov.tag.term }}</h1>
</section>
var app = angular.module('plunker', ['ui.bootstrap'])
.component('tagHover', {
// templateUrl: 'tags_modal.html',
template: `<section class="tags-modal" ng-show="tghov.tag.hoverDisplay" ng-mouseleave="tghov.leave()">
<h1>Hover for: {{ tghov.tag.term }}</h1>
</section>`,
controllerAs: 'tghov',
bindings : {
tag: '<'
}
})
.controller('TagsHoverController', function(){});
app.controller('MainCtrl', function($scope) {
});
app.component('myComponent', {
bindings: {},
// templateUrl: 'tags.html',
template: `<section class="tags-view">
<div class="tags-column">
<h1>Tags</h1>
<div class="tags-container">
<ul>
<li ng-repeat="tag in tgs.tags">
<div class="tag-container-container" ng-mouseleave="tgs.leaveTag(tag)">
<div class="tag-container">
<div class="tag" ng-mouseover="tgs.tagHover(tag)">{{ tag.term }}</div>
<tag-hover tag="tag"></tag-hover>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="tags-content">
<div class="tags-box">
<h2>Tags Content</h2>
</div>
</div>
</section>`,
controllerAs: 'tgs',
controller: TagsCtrl
});
TagsCtrl.$inject = [
'$scope',
'$uibModal'];
function TagsCtrl(
$scope,
$uibModal) {
///////////////////////////////////
this.hello = "hello world";
this.leaveTag = (tag) => tag.hoverDisplay = false;
this.tagHover = (tag) => tag.hoverDisplay = true;
this.tags = [
{ id:0, term: 'apple'},
{ id:1, term: 'butter'},
{ id:2, term: 'charlie'},
{ id:3, term: 'duff'},
{ id:4, term: 'edward'},
{ id:5, term: 'freddy'},
{ id:6, term: 'george'},
{ id:7, term: 'henry'},
{ id:8, term: 'ink'},
{ id:9, term: 'joker'},
{ id:10, term: 'kevin'},
{ id:11, term: 'leon'},
{ id:12, term: 'mary'},
{ id:13, term: 'nancy'},
{ id:14, term: 'olivia'},
{ id:15, term: 'preston'},
{ id:16, term: 'quincy'},
{ id:17, term: 'robyn'},
{ id:18, term: 'steven'},
{ id:19, term: 'teddy'},
{ id:17, term: 'ulysses'},
{ id:18, term: 'victor'},
{ id:19, term: 'winston'},
{ id:20, term: 'xavier'},
{ id:20, term: 'yvette'},
{ id:21, term: 'zander'}
];
}/* Put your css in here */
body {
font-family: Arial, sans-serif;
}
.tags-hover-container {
float: left;
position: fixed;
z-index: 101;
left: 240px;
margin-top: 40px;
width: 200px;
height: auto;
}
.tags-column {
z-index: 1;
float: left;
position: relative;
overflow-y: auto;
margin-top: 70px;
max-width: 230px;
min-width: 230px;
height: calc(100% - 165px);
}
.tags-column li {
list-style: none;
}
.tags-container {
overflow-y: auto;
height: 320px;
}
.tag-container-container { float: left; position: relative; width: 100%; }
.tag-container { float: left; position: relative; }
.tags-content {
float: left;
background: #f0f0f0;
}
.tags-box {
float: left;
padding: 20px;
width: 320px;
height: 640px;
background: #4169E1;
}
.tags-box h2 {
color: #fff;
}
.tag {
margin: 0 10px 10px 0;
padding: 9px 10px;
width: auto;
color: #fff;
background: #3D3D3D;
border-radius: 4px;
cursor: pointer;
clear: both;
}
.tag:hover {
background: #656565;
}
.tags-modal {
float: left;
position: fixed;
z-index: 101;
left: 100px;
margin-top: -20px;
padding: 10px;
width: 200px;
height: auto;
color: white;
background: blue;
border-radius: 4px;
}
.tags-modal:before {
position: absolute;
top: -8px;
left: 26px;
z-index: 99;
content: '';
display: block;
height: 0; width: 0;
border-bottom: 8px solid blue;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
}<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script src="https://code.angularjs.org/1.5.4/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.1/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.1/ui-bootstrap-tpls.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<my-component></my-component>
</body>
</html>最后！是的，没有 CSS 解决方案，我必须找出当前鼠标 y 位置并使用 ng-style 动态更新样式。
this.hoverTicker = (event, ticker) => {
MousePosition.set(event);
const mouseY = MousePosition.current.y;
ticker.pos = { top: `${mouseY}px` };
ticker.hoverDisplay = true;
};
<div class="tag-container" ng-mouseleave="tikp.leaveTicker(ticker)">
<div class="ticker"
ng-mouseenter="tikp.hoverTicker($event, ticker)"
ng-click="tikp.selectTicker('portfolio', ticker);">
<span ng-if="ticker.long && !ticker.hoverDisplay">
{{ ticker.short }}
</span>
<span ng-if="!ticker.long || ticker.hoverDisplay">
{{ ticker.ticker }}
</span>
</div>
<ticker-hover ticker="ticker"></ticker-hover>
</div>
const set = (e) => {
current.x = e.pageX;
current.y = e.pageY;
}
<div class="ticker-hover-container"
ng-style="tkhov.ticker.pos" ng-show="tkhov.ticker.hoverDisplay">
^ tkhov is the controllerAs this