ng-mouseover＆ng-mouseleaveのボタンが期待通りに表示されない - AngularJS

Question

私は現在、他のQ/Aを見ていてもしばらくは解決できないという問題がありました。

ng-showのボタンから別のボタンに切り替えたいと思います。

• ng-mouseoverトリガーが、私は現在のボタン、button-dbを隠し、2つ目を表示したいと思い 、
• ng-mouseleaveトリガーが、私はbutton-shoutを隠し、button-dbを示す、反対のことをしたいと思っbutton-shout。私はすでに次のコードでこの作業を行うことができるよ

：

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

私は次のスターター状況を得ることができます：

ng-mouseoverトリガは、button-db（パープル長方形）が隠されます右

そして、私はそれをしたいと思い、上

左側のbutton-dbとbutton-actionbutton-shout（〜緑の四角形ながら、別のイメージ）が表示され、その逆も同様です（実際には動作しています）。

私は何を達成しようとしている - button-dbの場所

のままに>button-shoutしかし、その代わりに、私は次のような結果を得る：

を

代わりに、私がbutton-dbを訪れたとき、私はの代わりにこの空白のdivを取得します

button-shoutは示されません、それはDOMに存在しないと、それは私が他のボタンで行ったようにそれを構築するために管理していてもheightとwidthを持っていません。

私は、次のCSSクラスを使用しています：

半分は、ボタン-DBはとの両方:beforeと:afterを持って

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

をボタンに寸法を与え、自分の位置を設定し、小さな画像とその間にint numberを扱うshout-value

.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に次元がなく、ng-mouseoverを実行するとbutton-dbの場所に表示されません。

私はすでにdisplay: block &、ng-ifを使用して、クラスの追加や削除、z-indexを使用してdisplay: noneみましたが、私はいつもこの問題を取得します。

button-shoutはhalfの配置を除いて何も継承していません。

Here is a little Plunkerどのように動作するかを理解できるように、2つのボタンだけを載せています。それはPlunkerで動作しますが、私のアプリケーションでは動作しません。

mouseoverがトリガーすると、1つのボタンが非表示になり、もう1つが表示され、mouseleaveがトリガーされると、古いものが表示されます。

1）なぜ正しく表示されないのですか？

2）これはどのように修正できますか？

私はできるだけ明確にして欲しいと思っています。ありがとうございます。

Answer 1

私は本当に問題が何であるか分からないので、ここにあなたが現在持っているものを再現しようとするスニペットを投稿します。このスニペットがあなたの問題を再現し、回答者が回答のベースとして使用するかどうかは自由に教えてください。

注：あなたのHTMLでは、最初の要素でng-mouseleaveを削除し、2番目でng-mouseenterを削除しました。これは、互いに競合して重複イベントが発生するためです。もちろん

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>

私はイメージを持っていないので、私は黒と白の背景にそれらを変更しました。私が見ることができるのは、私は正しい場所にいないようだが、これはあなたの問題ではないと思われる黒いくそがあるということです。

Answer 2

mouseoverが機能を起動するかどうかを確認します。マウスオーバーでは、htmlでng-show値の値をfalseからtrueに変更する必要があります。

Answer 3

誤読があるかもしれませんが、ここで必要な機能は何ですか？クラスを切り替えるだけの場合、これについてはどうですか？コントローラの機能は必要ありません。

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>