Question

我有一个图像列表（一些项目），我正在使用ng-repeat以网格方式显示它们。我希望当我将鼠标悬停在任何图像上时，图像应该消失，并且新的div与图像应该打开该图像项的所有子组件。我的实现如下，当我将鼠标悬停在任何图像上，而不是所需的行为时，会发生一些图像翻转。我在实现这个目标时遇到了问题。有没有办法做到这一点。

  **hovers.html**
    <html>
   <div   ng-repeat="a in modules">
   <md-card  class="image">   <img src="a.image_url" />
    <div class="overlay">
          /*Some items  */                 
        </div>          
        </md-card> </div>   </html>


   **style.css**


  .image {
  position: relative;
 display: inline-block;
 width: 100%; }

.overlay {
 display: none; }

  .image:hover {display:none;}

  .image:hover .overlay {
  width: 100%;
 height: 100%;
 background: rgba(1, 0, 0, 0.2);
  position: absolute;
 top: 0;
  overflow: auto;
  left: 0;
  display: inline-block;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
  box-sizing: border-box;
  }
  .image:hover .overlay img {
    vertical-align: top;
    }

          **home.html**

  <div    class="columns"  width="100%" height="100%">
   <custom-hover    ng-repeat="a in modules" 
            module="a" layout="row">

    </custom-hover>

           </div>



          home.js

   "use strict";

 function customHover($compile){
return {
    restrict: 'E',
     scope: {
             module: "=",

             },

          templateUrl:  "hovers.html",                                                                                                     
    controller: function($scope, $mdDialog) {
        console.log("=======",$scope.module)


    }

         }
            }; 

         module.exports = customHover;

Answer 1

要保留元素空间，请将display更改为visibility

.image {
  position: relative;
  visiblity: visible;
  width: 100%;
 
}

.overlay {
  display: none;
}

.image:hover img{
  visibility: hidden;
}

.image:hover .overlay{
  position:absolute;
  top:0;
  left:0;
	width: 100%;
	height: 100%;
	background: rgba(1, 0, 0, 0.2);
	overflow: auto;
	display: inline-block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

<div class="image" ng-repeat="a in modules">
  <md-card>
    <img src="https://image.freepik.com/free-icon/global-symbol_318-68107.jpg" />
    <div class="overlay">
      <p>Text</p>
    </div>
  </md-card>
</div>

Answer 2

基本上你应该将hover放在你命名为class = image的图像容器上，但隐藏图像自身，所以它应该是：

  .image:hover img{
    display: none;
  }

  .image:hover .overlay{
    display: block;
  }

这是html：

  <html>
    <head>
      <style>
        .image {
          position: relative;
          display: inline-block;
        }

        .image:hover img{
          display: none;
        }

        .image:hover .overlay{
          display: block;
        }

        .myCard{
          width: 200px;
          height: 120px;
          overflow: hidden;
        }

        .overlay{
          display: none;
        }

      </style>
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
      <script src="app.js"></script>
    </head>

    <body ng-app="app" ng-controller="com">
      <div  class="image" ng-repeat="a in modules">
        <md-card class="myCard">
          <img ng-src="{{a.image_url}}"/>
          <div class="overlay">
            {{a.desc}}
          </div>
        </md-card>
      </div>
    </body>
  </html>

angular js：

  angular.module("app", [])
    .controller("com", function($scope){
      $scope.modules = [
        {
          "image_url": "a.jpg",
          "desc": "cocktail"
        },
        {
          "image_url": "b.jpg",
          "desc": "cookie"
        },
        {
          "image_url": "c.jpg",
          "desc": "cake"
        }
      ];
    });

默认显示图片，当您悬停时，它会隐藏图片并显示desc。

我们悬停时如何隐藏图像？

2 个答案: