ng-mouseover＆amp;上的按钮ng-mouseleave将无法按预期显示 - AngularJS

时间：2016-05-20 20:01:55

标签： javascript html css angularjs

我有一个问题，我现在无法解决，甚至在SO上寻找其他问答。

我想从一个按钮切换到另一个按ng-show。

  • 当ng-mouseover触发时，我想隐藏当前按钮button-db，并显示第二个按钮，button-shout
  • 当ng-mouseleave触发时，我想反过来隐藏button-shout并显示button-db。

我已经能够使用以下代码完成此工作：

HTML： 

<div class="footer">
  <div ng-show="hoverEdit" class="half button-db" 
       ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">
          <span class="shout-value">200</span>       
  </div>
  <div ng-show="!hoverEdit" class="half button-shout" 
       ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">
     <div class="icon-over" ng-src="./assets/css/img/logo-white-m.png" 
          style="width: 29px; height: 21px;"></div>
  </div>

  <div class="half button-action">
   <span class="icon-cart" ng-src="./assets/css/img/icon-cart.png" 
         style="width: 29px; height: 21px;"></span>
  </div>
</div>

JS： 

$scope.hoverEdit = true;

$scope.hoverIn = function(){
    $scope.hoverEdit = false;
};

$scope.hoverOut = function(){
    $scope.hoverEdit = true;
};

使用上面的代码，我可以得到以下启动情况：

button-db on the left and button-action on the right

  左侧是

button-db，右侧是button-action

我希望当ng-mouseover触发时，button-db（紫色矩形）被隐藏，而button-shout（〜绿色矩形与另一个图像）被显示，反之亦然（这实际上是有效的，如下图所示：

what I'm trying to achieve -> button-shout on the left at button-db's place

  

我想要实现的目标 - ＆gt; button-shout位置左侧的button-db

但是，相反，我得到以下结果：

what I get instead

  

我得到了什么，当我过去button-db时，我得到了这个未知的空白div而不是button-shout

button-shout没有显示，并且它没有出现在DOM中，它没有height和width，即使我设法构建它就像我对其他人一样的按钮。

我正在使用以下 CSS 类：

half 为按钮提供尺寸并设置其位置

.pod .footer .half {
  display: table-cell;
  padding-top: 1px;
  padding-left: 8px;
  padding-right: 8px;
  vertical-align: middle;
  height: 45px;
}

button-db 同时包含:before和:after的小图片，shout-value可以处理它们之间的int number 

.pod .footer .button-db {
  background-color: #6ab5ac;
  text-align: center;
  color: #fff;
  background-color: #6455a0;
}
.pod .footer .button-db .shout-value {
  margin-top: 0px;
  padding: 2px;
  color: #fff;
  display: inline-block;
  position: relative;
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
}
.pod .footer .button-db .shout-value:before {
  content: "";
  display: inline-block;
  background-image: url("./assets/css/img/shout-megaphone-white.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 30px;
  height: 23px;
  position: absolute;
  left: -17px;
  top: 0px;
}
.pod .footer .button-db .shout-value:after {
  content: "";
  background-image: url("./assets/css/img/shout-db-white.svg");
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
  width: 28px;
  height: 27px;
  position: absolute;
  right: -19px;
  top: -1px;
  vertical-align: super;
  font-size: 12px;
  display: inline-block;
  padding: 0;
  padding-top: 0px;
  font-weight: 500;
}
.pod .footer .button-db .shout-value .db {
  vertical-align: super;
  font-size: 10px;
  display: inline-block;
  padding: 0;
}
.pod .footer .button-db .db-value {
  margin-top: 0px;
  padding: 2px;
  color: #fff;
  display: inline-block;
  position: relative;
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
}
.pod .footer .button-db .db-value:after {
  content: "dB";
  background-image: none;
  width: 28px;
  height: 23px;
  position: absolute;
  right: -19px;
  top: 0px;
  vertical-align: super;
  font-size: 12px;
  display: inline-block;
  padding: 0;
  padding-top: 0px;
  font-weight: 500;
}
当ng-mouseover触发时，

按钮喊按钮显示;它不需要任何:before和:after，它只有1个图像，没有值

.pod .footer .button-shout {
  background-color: #6AB6AC;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  line-height: 30px;
}

按钮操作购物车按钮，button-shout看起来非常像它，但颜色和图像

.pod .footer .button-action {
  background-color: #ffae00;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  line-height: 30px;
}

我使用ng-mouseover和ng-mouseleave实现的功能完全符合我的要求。我不明白为什么button-shout没有尺寸，并且在执行button-db时没有在ng-mouseover处显示。

我已尝试使用ng-if，添加和删除类，使用z-index和display: none＆amp; display: block但我总是遇到这个问题。

我注意到button-shout除了half的位置外没有任何内容。

Here is a little Plunker我只忍了两个按钮让你了解它应该如何运作。它适用于Plunker但不适用于我的应用程序。

当mouseover触发时，会隐藏一个按钮，另一个按钮会显示，当mouseleave触发时，会显示旧按钮。

1）您是否知道为何无法正确显示？

2）我该如何解决这个问题？

我希望我能尽可能地清楚，先谢谢。

3 个答案:

答案 0 :(得分：4)

说实话，我不确定问题是什么，所以我会在这里发布一个尝试重现你现有内容的片段。请随意告诉我们这个片段是否能够重现您的问题，并且可以将答案用作答案的基础。

注意：在你的HTML中我删除了第一个元素上的ng-mouseleave和第二个元素上的ng-mouseenter，因为它们相互冲突并抛出重复事件。

＆＃13;
＆＃13; 
angular.module("app", []).controller("ctrl", ['$scope', function($scope){
    $scope.hoverEdit = true;

$scope.hoverIn = function(){
    console.log("HOVER IN");
    $scope.hoverEdit = false;
};

$scope.hoverOut = function(){
    $scope.hoverEdit = true;
      console.log("HOVER OUT");
};
}]);
＆＃13; 
.pod .footer .half {
  display: table-cell;
  padding-top: 1px;
  padding-left: 8px;
  padding-right: 8px;
  vertical-align: middle;
  height: 45px;
}



.pod .footer .button-db {
  background-color: #6ab5ac;
  text-align: center;
  color: #fff;
  background-color: #6455a0;
}
.pod .footer .button-db .shout-value {
  margin-top: 0px;
  padding: 2px;
  color: #fff;
  display: inline-block;
  position: relative;
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
}
.pod .footer .button-db .shout-value:before {
  content: "";
  display: inline-block;
  background-color: black;/*url("./assets/css/img/shout-megaphone-white.svg");*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 30px;
  height: 23px;
  position: absolute;
  left: -17px;
  top: 0px;
}
.pod .footer .button-db .shout-value:after {
  content: "";
  background-image: white;/*url("./assets/css/img/shout-db-white.svg");*/
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
  width: 28px;
  height: 27px;
  position: absolute;
  right: -19px;
  top: -1px;
  vertical-align: super;
  font-size: 12px;
  display: inline-block;
  padding: 0;
  padding-top: 0px;
  font-weight: 500;
}
.pod .footer .button-db .shout-value .db {
  vertical-align: super;
  font-size: 10px;
  display: inline-block;
  padding: 0;
}
.pod .footer .button-db .db-value {
  margin-top: 0px;
  padding: 2px;
  color: #fff;
  display: inline-block;
  position: relative;
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
}
.pod .footer .button-db .db-value:after {
  content: "dB";
  background-image: none;
  width: 28px;
  height: 23px;
  position: absolute;
  right: -19px;
  top: 0px;
  vertical-align: super;
  font-size: 12px;
  display: inline-block;
  padding: 0;
  padding-top: 0px;
  font-weight: 500;
}


.pod .footer .button-shout {
  background-color: #6AB6AC;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  line-height: 30px;
}

.pod .footer .button-action {
  background-color: #ffae00;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  line-height: 30px;
}
＆＃13; 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div class="pod">
<div class="footer" ng-app="app" ng-controller="ctrl">
  <div ng-show="hoverEdit" class="half button-db" 
       ng-mouseover="hoverIn()">
          <button class="shout-value">100</button>       
  </div>
  <div ng-show="!hoverEdit" class="half button-shout" 
      ng-mouseleave="hoverOut()">
         <button class="shout-value">200</button>
  </div>

  <div class="half button-action">
     <button class="shout-value">300</button>
  </div>
</div>
</div>
＆＃13;
＆＃13;
＆＃13;

当然，由于我没有图像，我将它们改为黑白背景。我能看到的是，我有一个似乎不在正确位置的黑色垃圾，但这似乎不是你的问题所在。

答案 1 :(得分：1)

检查鼠标悬停是否触发该功能。 Mouseover应该在html中将ng-show值的值从false更改为true。

答案 2 :(得分：1)

我可能会误读，但为什么这里需要任何功能？如果您只是想尝试切换课程，那该怎么办？它不需要任何控制器功能。

https://plnkr.co/edit/HMACVKTlLzbkfWhy4v1S?p=preview 

<div class="half"
      ng-init="hover = false"
      ng-class="hover ? 'button-shout' : 'button-db'"
      ng-mouseenter="hover = true"
      ng-mouseleave="hover = false">

<div class="icon-over">300</div>
相关问题
最新问题