Question

我遇到第一次遇到的问题。问题是当我刷新“主页”页面悬停在div上工作正常时，但如果我点击a href Attribute即/home/courses并返回主页，此脚本将悬停不起作用。在这个应用程序中，我使用角度路线和更改视图ng-view也许这会产生问题？

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

Answer 1

尝试按如下方式修改代码。

$(document).on('.card','hover',function() { 
    /*your code goes here*/
});

更改后url路径脚本无法正常工作

1 个答案: