2017-08-14 30 views
0

初めて遭遇する問題があります。問題は、divsの "home"ページのホバーを正常に更新したときですが、a href Attribute、つまり/home/coursesをクリックしてホームページに戻ると、このスクリプトはホバーで動作しません。このアプリで私は角度のルートを使用しているとビューを変更ng-view多分これは問題を引き起こす?変更後のURLパススクリプトが正しく動作しない

HTML

<div class="card"> 
    <div class="all_course_view"> 
    <div class="thumbnail image_course"> 
    <div class="course_image"> 
    <button class="btn btn-primary">See more</button> 
    </div> 
</div> 
<div class="caption"> 
    <h3>Title</h3> 
    <h4>Subtitle</h4> 
    <div class="line-description my mt-15"> 
    <span class="glyphicon glyphicon-road"></span> 
    </div> 
    <ol> 
    <ul class="list-group list-group-flush text-left"> 
     <li>Description</li> 
    </ul> 
    </ol> 
    <div class="price"> 
    <div class="col-md-4 text-right"> 
     <span class="oldPrice">78$</span> 
     <span class="actualPrice">12$</span> 
    </div> 
    </div> 
</div> 

スクリプト

$(document).ready(function(){ 
$('.card').hover(
    function(){ 
     $(this).find('.course_image').slideDown(400); //.fadeIn(250) 
    }, 
    function(){ 
     $(this).find('.course_image').slideUp(0); //.fadeOut(205) 
    } 
) 
}); 

CSS

.course_image 
{ 
position:absolute; 
top:0; 
right:0; 
background: rgba(0, 0, 0, 0.57); 
width:100%; 
height:100%; 
padding:2%; 
display: none; 
text-align:center; 
color:#fff !important; 
z-index:2; 
} 
+0

アングルでは、ルーティング時にDOMが変更されます(つまり、destoryの要素、再作成されます)。イベントハンドラは、要素が破棄されるとすぐに消えます。また、DOMハンドラを設定するだけで、要素が再作成されたときに再度設定されることはありません –

+0

説明をありがとう、イベントハンドラを正しく動作させるオプションはありますか? –

+0

はい(Angjの外側でDOMを操作しないでください)、角度方向に詰め込みます。[ngMouseover](https://docs.angularjs.org/api/ng/directive/ngMouseover)、[ngMouseleave]などの角度イベントディレクティブを使用しますhttps://docs.angularjs.org/api/ng/directive/ngMouseleave)。また、スライドアップアニメーションを行うだけなので、CSSと[:hover psuedo class](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover)を使用することもできます –

答えて

0

は、次のようにコードを変更してください。

関連する問題