悬停时如何隐藏图像？答案

【问题标题】：How to hide an image when we hover it?悬停时如何隐藏图像？
【发布时间】：2018-01-10 10:05:22
【问题描述】：

我有一个图像列表（一些项目），我正在使用 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;

【问题讨论】：

您能否编辑您的问题并将您的完整 HTML 和完整 CSS 完全分开，以便我更好地了解问题所在？
Pure CSS Image Hover Without Using Background Images的可能重复
我需要重新编辑一下吗？？
您的代码非常不清楚，我无法判断您正在做什么或试图做什么。编辑它以清楚并分离代码，以便我们可以帮助您。
好吧抱歉我的编辑不正确。我修复它。

标签： html css angularjs

【解决方案1】：

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

  .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>

角度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。

【讨论】：

非常感谢，我认为该解决方案可能有效，我将对其进行测试。但是你能告诉我我遇到问题的原因吗，因为我是新手，正在学习 AngularJS、CSS 等。
问题出在这里：image:hover {display:none;}，image 类是图像容器，它应该显示图像自身或文字，所以你不应该隐藏容器。悬停时应该隐藏 image-self，.image:hover img{ display: none; }
是的，我明白你的意思。但是我遇到了同样的翻转问题。请帮助我，因为这个问题对我来说是一场噩梦。实际上我已经构建了一个自定义指令，我想在指令中显示的 html 内容与我在 html 中给出的内容相同代码。所以基本上我在我的自定义指令标签中使用 ng-repeat。

【解决方案2】：

要保留元素空间，请将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>

【讨论】：

感谢您的建议，但在我的情况下，我想通过悬停隐藏的图像标签的 src 属性发生变化（意味着 src 的值是变量而不是静态引用）。
我已经试过你的解决方案效果很好，非常感谢你