如何在AngularJS中的悬停事件的另一部分的顶部显示透明部分？

Question

我想在另一个section / div的悬停事件中显示一个包含文本，按钮和链接的透明层。我是否需要编写自定义代码，其中的事件将在运行时通过 ng-style taglib来改变元素的样式？还是有更好的替代方法来实现这个目标吗？

Answer 1

只需使用css悬停并更改不透明度（请注意，过渡是可选的，但可以产生很好的效果）。

HTML

chdir('/');

CSS

<div class="wrapper">

  <div class="title">hover text</div>

</div>

拨弄

https://jsfiddle.net/215crow2/1/

Answer 2

在你的控件中

定义一个变量： $scope.showContainer=false; 或者在容器和按钮的上部标记中的HTML内部 <div ng-init="showContainer=false">

然后就像Fissio Said一样，使用mouseenter和mouseleave

mouseenter=> showContainer= true
mouseleave=> showCOntainer= false

<div class="container" ng-show="showContainer"> ... </div>

Answer 3

试试这个伙伴：

<强> HTML：

<div ng-mouseenter="setFunction(true)" ng-mouseleave="setFunction(false)" >
    //this is your main content here

   <div ng-class="isTransparent">
      //your transparent overlay div
   </div>
</div>

<强>的CSS：

.myClass{
your overlay transparency styles here.
}

<强>角：

$scope.setFunction= function (val) {

   if (val === true) {
       $scope.isTransparent = 'myClass'; //note you may need a dot in fromt of myClass: '.myClass'
   }
   else {
       $scope.isTransparent = '';
   }
};