AndreaM16 AndreaM16 - 6 months ago 31
AngularJS Question

Button on ng-mouseover & ng-mouseleave won't get shown as expected - AngularJS

I've a problem that I wasn't able to solve for a while now, even looking to other Q/A on SO.

I would like to switch from a button to another one with an

ng-show
.


  • When
    ng-mouseover
    triggers, I would like to hide the current button,
    button-db
    , and show a second one,
    button-shout

  • When
    ng-mouseleave
    triggers, I would like to do the opposite, hiding
    button-shout
    and showing
    button-db
    .



I'm already able to make this work with the following code:

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


With the code above I'm able to get the following starter situation:

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


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


And I would like that, when
ng-mouseover
triggers,
button-db
(The Purple Rectangle) gets hidden while
button-shout
(~Green Rectangle with another image) gets shown and vice-versa (this is actually working), like in the following image:

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


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


But, instead, I get the following result:

what I get instead


What I get instead, when I go over
button-db
I get this uknown blank div instead of
button-shout



button-shout
doesn't get shown and it is not present in the DOM and it does not have
height
and
width
even if I managed to build it like I did with the other buttons.

I'm using the following CSS classes:

half gives dimensions to the buttons and sets their position

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


button-db has both
:before
and
:after
with a little images and
shout-value
to handle the
int number
between them

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


button-shout button to get shown when
ng-mouseover
triggers; It does not need any
:before
and
:after
, it only has 1 image and no values

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


button-action cart button,
button-shout
would look pretty much like it but for the color and the image

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


The functionalities I implemented using both
ng-mouseover
and
ng-mouseleave
work perfectly as I want. I don't get why
button-shout
has no dimensions and does not get shown at
button-db
's place when doing
ng-mouseover
.

I already tried using
ng-if
, adding and removing classes, using
z-index
and
display: none
&
display: block
but I always get this problem.

I noticed that
button-shout
inherits nothing except for
half
's placement.

Here is a little Plunker I put up with only two buttons to let you understand how it should work. It works on the Plunker but not in my application.

When
mouseover
triggers, one button hides and the other one is shown and when
mouseleave
triggers, the old one is shown back.

1) Have you any idea on why it doesn't get shown properly?

2) How can I fix this?

I hope I've been as much clear as possible, Thanks in advance.

Answer

To be honest i'm not really sure of what the problem is so i'll post here a snippet that try to reproduce what you currently have. Feel free to tell us if this snippet reproduces your problem and for answeres to use it as a base for an answer.

Note : in your HTML i removed the ng-mouseleave on 1st element and ng-mouseenter on 2nd because they were conflicting each other and throw duplicate events.

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");
};
}]);
.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;
}
 <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>

Of course since i don't have the images, i changed them to black and white background. What i can see is that i have a black crap that seems to not be in the right place, however this doesn't seems to be what your problem is.