2016-04-25 3 views
1

私はHTML、CSS、JavaScript、およびAngularJSを使用してWebアプリケーションを作成しています。 これまでのところ、ボックスには内容のあるボックスがあります。そのボックスがクリックされると、javascript関数を呼び出してより多くのボックスを表示し、ng-clickを使ってそれを行いました。条件が真の場合ホバープロパティの変更

<div ng-click="!(clickEnabled)||myFunction(app)" class ="box"> 
    *** things displyaed inside the box ***   

</div> 

clickEnabledの値(trueまたはfalse)MyFunctionを()と呼ばれるかどうかと、この部分は完璧に動作しますかどうかを判断します。 clickEnabledがfalseの場合、ng-clickは無効になります。 問題は、私のCSSファイルではボックスの上にカーソルを置いたときにカーソルがポインタになり、ボックスの背景もホバー上で変わるような.boxクラスです。カーソルを作成する方法はありますか?デフォルトで、ng-clickが無効になっているとき、またはclickEnabledがfalseのときにボックスの背景色を変更しないようにしますか?

は、ここで私はclickEnabledがfalse/ng-clickdisabledあるときにカーソルがポインタになりたくない、

 .box { 
      border: 1px solid lightgray; 
      padding: 10px; 
      border-radius: 5px; 
      border-color: white; 
      box-shadow: 0 0 5px gray; 
      cursor: pointer; 
      background: #353131; 
      border-width: 2px; 
      display: inline-block; 
      width: 300px; 
      height: 150px; 
    } 

    .box:hover { 
     background-color: dimgrey; 
     border-color: grey; 
    } 

再び私のCSSコードのサンプルです。事前に 感謝:)

答えて

3

あなたは、これは完璧ですng-class

<div ng-click="!(clickEnabled)||myFunction(app)" ng-class="{no-cursor: !clickEnabled}" class="box" > 
    *** things displyaed inside the box ***   

</div> 

.box.no-cursor { 
    cursor: default; 
} 
+1

を使用しようとすることができます。私はそれがこの単純なことを知らなかった。どうもありがとうございます :) –

関連する問題