我使用 AngularJs 以网格的形式多次重复一个 li，当我将鼠标悬停在每个 li 上时，我在每个 li 的旁边显示一个描述框。但是，当我将鼠标悬停在网格右侧的网格项上时，我希望描述框显示在另一侧，这样它就不会离开屏幕。
这里有一个 jsfiddle 来解释我的意思:
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>我的网格也会根据屏幕大小而变化，因此右侧的元素不会总是在右侧...
是否有任何方法可以根据屏幕的哪一侧使用 Angular 来更改网格元素类？或任何其他解决此问题的方法？
谢谢
最佳答案
我会为工具提示定义两个类，一个用于左侧，一个用于右侧，然后使用 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>
关于html - 如何使工具提示 div 根据屏幕的哪一侧改变一侧？ ( Angular )，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37327734/