Javascript ng鼠标上方的按钮&；吴穆斯莱夫赢得'；无法按预期显示-AngularJS

我有一个问题，我现在暂时无法解决，甚至在其他Q/a上也无法解决

我想从一个按钮切换到另一个带有

ng show

的按钮

• 当

  ng mouseover

  触发时，我想隐藏当前按钮

  button db

  ，并显示第二个按钮

  button shout

• 当

  ng mouseleave

  触发时，我想做相反的事情，隐藏

  按钮shout

  并显示

  按钮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>

$scope.hoverEdit = true;

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

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

通过上面的代码，我能够获得以下初始情况：

按钮db

位于左侧，按钮动作

位于右侧

我希望，当
ng mouseover
触发时，
按钮db
（紫色矩形）被隐藏，而
按钮shout
（~绿色矩形和另一个图像）被显示，反之亦然（这实际上起作用），如下图所示：


我想要实现的是->
按钮在
按钮db
的左侧

但是，我得到了以下结果：


而我得到的是，当我浏览
按钮db
时，我得到的是这个未知的空白div，而不是
按钮shout

button shout
不会显示，它不存在于DOM中，并且它没有
高度
和
宽度
，即使我像使用其他按钮一样构建了它

我正在使用以下CSS类：

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

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

按钮db既有
：在
之前，也有
：在
之后，有一些图像和
呼出值
来处理它们之间的
整数

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

按钮SHOOT按钮，当
ng鼠标悬停
触发时显示该按钮；它不需要任何
：在
之前和
：在
之后，它只有一个图像，没有值

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

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

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

我注意到，
按钮shout
除了继承
一半的位置外，什么都没有继承

我只能用两个按钮让你明白它应该如何工作。它在Plunker上有效，但在我的应用程序中无效

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

1）你知道为什么不能正确显示吗？

2）如何解决此问题？

我希望我已经尽可能清楚了，提前谢谢。
检查鼠标是否触发该功能。鼠标悬停应该在html中将ng上的值从false更改为true
 老实说，我真的不确定问题出在哪里，所以我将在这里发布一个片段，试图重现您当前拥有的内容。请随时告诉我们这段代码是否再现了您的问题，并让回答者将其作为答案的基础

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


angular.module（“app”、[]）.controller（“ctrl”、[“$scope”、函数（$scope）{
$scope.hoverEdit=true；
$scope.hoverIn=函数（）{
console.log（“悬停”）；
$scope.hoverEdit=false；
};
$scope.hoverOut=function（）{
$scope.hoverEdit=true；
console.log（“悬停”）；
};
}]);
.pod.footer.half{
显示：表格单元格；
垫面：1px；
左侧填充：8px；
右边填充：8px；
垂直对齐：中间对齐；
高度：45px；
}
.pod.footer.button数据库{
背景色：#6ab5ac；
文本对齐：居中；
颜色：#fff；
背景色：#6455a0；
}
.pod.footer.button db.shout值{
边际上限：0px；
填充：2px；
颜色：#fff；
显示：内联块；
位置：相对位置；
字号：18px；
字号：600；
线高：22px；
}
.pod.footer.button db.shout值：之前{
内容：“；
显示：内联块；
背景色：黑色；/*url（“./assets/css/img/shout-megaphone-white.svg”）*/
背景尺寸：包含；
背景位置：中心；
背景重复：无重复；
宽度：30px；
高度：23px；
位置：绝对位置；
左：-17px；
顶部：0px；
}
.pod.footer.button db.shout值：之后{
内容：“；
背景图像：白色；/*url（“./assets/css/img/shout db white.svg”）*/
背景尺寸：包含；
背景位置：右中；
背景重复：无重复；
宽度：28px；
高度：27px；
位置：绝对位置；
右：-19px；
顶部：-1px；
垂直对齐：超级；
字体大小：12px；
显示：内联块；
填充：0；
填充顶部：0px；
字号：500；
}
.pod.footer.button db.shout value.db{
垂直对齐：超级；
字体大小：10px；
显示：内联块；
填充：0；
}
.pod.footer.button db.db值{
边际上限：0px；
填充：2px；
颜色：#fff；
显示：内联块；
位置：相对位置；
字号：18px；
字号：600；
线高：22px；
}
.pod.footer.button db.db值：之后{
内容：“dB”；
背景图像：无；
宽度：28px；
高度：23px；
波西蒂
<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>