我正在使用AngularJs以网格形式多次重复li，当我将鼠标悬停在每个li的侧面时，我会在每个li的侧面显示一个描述框。但当我将鼠标悬停在网格右侧的网格项目上时，我希望描述框显示在另一侧，这样它就不会离开屏幕。
这是一个解释我的意思的小提琴手：
ul {
width: 100%;
margin: 0;
padding: 0;
}
li {
position: relative;
display: inline-block;
vertical-align: top;
margin: 0;
width: 20%;
padding: 5px;
}
li:hover .info {
opacity: 1;
transition: 0.5s;
}
.image {
width: 100%;
background-color: red;
height: 100px;
}
.info {
position: absolute;
background-color: yellow;
padding: 0px 5px;
width: 200%;
top: 0;
left: 100%;
opacity: 0;
transition: 0.5s;
z-index: 100;
}<ul>
<li>
<div class="image"></div>
<p>Hover over me</p>
<div class="info">
<p>Description Here</p>
</div>
</li>
<li>
<div class="image"></div>
<p>Hover over me</p>
<div class="info">
<p>Description Here</p>
</div>
</li>
<li>
<div class="image"></div>
<p>Hover over me</p>
<div class="info">
<p>Description Here</p>
</div>
</li>
<li>
<div class="image"></div>
<p>Hover over me</p>
<div class="info">
<p>Description Here</p>
</div>
</li>
<li>
<div class="image"></div>
<p>Hover over me</p>
<div class="info">
<p>Description Here</p>
</div>
</li>
<li>
<div class="image"></div>
<p>Hover over me</p>
<div class="info">
<p>Description Here</p>
</div>
</li>
<li>
<div class="image"></div>
<p>Hover over me</p>
<div class="info">
<p>Description Here</p>
</div>
</li>
<li>
<div class="image"></div>
<p>Hover over me</p>
<div class="info">
<p>Description Here</p>
</div>
</li>
</ul>
我的网格也会根据屏幕尺寸而改变，因此右侧的项目并不总是在右侧......
是否有任何方法可以根据屏幕的哪一侧使用角度更改网格项目类？或任何其他解决方法？
谢谢
答案 0 :(得分：0)
我将为工具提示定义两个类，一个用于左侧，一个用于右侧，然后使用ng-class调用一个函数。函数内部评估它被调用的元素的位置并返回适当的类。以下是一个相当完整的示例，您应该能够应用于您的案例。
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.css" />
<style>
.left {
background: #ff8a80;
}
.right {
background: green;
}
</style>
</head>
<body ng-app="app">
<div layout="row" flex="100" ng-controller="myController as ctrl">
<div flex="50" ng-class="ctrl.getClass('left')" id="left">
<h1>{{ctrl.hello}} Left</h1></div>
<div flex="50" ng-class="ctrl.getClass('right')" id="right">
<h1>{{ctrl.hello}} Right</h1></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js "></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js "></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js "></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js "></script>
<script>
angular.module('app', []).controller("myController",myController);
function myController($scope){
var ctrl = this;
ctrl.hello ="Hello"
ctrl.getClass = getClass;
function getClass(id) {
var e=document.getElementById(id);
var rect = e.getBoundingClientRect()
if (rect.left < (document.body.clientWidth/2)-1) {
return "left"
}
return "right"
}
};
</script>
</body>
</html>