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;
}
アングルでは、ルーティング時にDOMが変更されます(つまり、destoryの要素、再作成されます)。イベントハンドラは、要素が破棄されるとすぐに消えます。また、DOMハンドラを設定するだけで、要素が再作成されたときに再度設定されることはありません –
説明をありがとう、イベントハンドラを正しく動作させるオプションはありますか? –
はい(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)を使用することもできます –