2013-03-07 101 views
1

Live sitejQuery的滑塊按鈕「懸停」

我的jQuery的內容滑塊的右鍵似乎被卡在「懸停」。我已經檢查了html,css和圖像路徑 - 一切似乎都應該如此。我的jQuery的技能是不是很不夠好尚未能查明是否有問題那裏 -

HTML

<div id="slider_mask"> 
     <div class="slide_container"> 
      <div class="slide"><p>is where creative <i>je ne sais quoi</i> + business savvy collide.</p></div> 
      <div class="slide"><p>is the maker + doer for makers + doers</p></div> 
      <div class="slide"> 
        <ul> 
        <?php if ($maxitems == 0) echo '<li>No items.</li>'; 
        else 
        // Loop through each feed item and display each item as a hyperlink. 
        foreach ($rss_items as $item) : ?> 
        <li> 
        <a href='<?php echo $item->get_permalink(); ?>'> 
        <?php echo $item->get_title(); ?> 
        </a> 
        </li> 
        <?php endforeach; ?> 
        </ul> 
       </div> 
     </div> 
     <div class="left_button"><a href="#" class="left-arrow" title="left arrow"></a></div> 
     <div class="right_button"><a href="#" class="right-arrow" title="right arrow"></a></div> 
    </div> 

CSS

#home #slider_mask { 
    width: 420px; 
    margin: 0 auto; 
    padding-top: 60px; 
    position: relative; 
    overflow: hidden; 
} 

#home #slider_mask .left_button { 
    float: left; 
    display: block; 
    width: 23px; 
    height: 25px; 
    background: url(img/left-arrow.png); 
    text-indent: -99999px; 
} 

#home #slider_mask .left_button:hover { 
    background: url(img/left-arrow-hover.png); 
    background-position: 0 0; 
} 

#home #slider_mask .slide_container { 
    float: left; 
    font-size: 120%; 
    text-align: center; 
    width: 420px; 
} 

#home #slider_mask .right_button { 
    float: right; 
    display: block; 
    width: 23px; 
    height: 25px; 
    background: url(img/right-arrow.png); 
    text-indent: -99999px; 
} 

#home #slider_mask .right_button { 
    background: url(img/right-arrow-hover.png); 
    background-position: 0 0; 
} 

#home #slider_mask .slide { 
    float: left; 
    display: block; 
    text-align: center; 
} 

jQuery的

jQuery(document).ready(function($){ 
// Setup Variables 
var slides = $('#slider_mask .slide_container').children(); 
var total_slides = slides.length; // ***CHANGED*** 
var slide_width = $('#slider_mask').width(); 
var current_slide = 0; 

// ***REMOVED*** slides.not(':first').hide(); 
// Set the width of the slide_container to total width of all slides 
$('#slider_mask .slide_container').width(slide_width*total_slides); 

slides.width(slide_width); // ***ADDED*** 

// Handle Right Arrow Click 
$('#slider_mask .right_button').on('click', function() { 

    current_slide++; 

    if(current_slide == total_slides){ current_slide = 0; } 

    var negative_margin_required = current_slide*slide_width; 
    $('#slider_mask .slide_container').stop().animate({marginLeft:-negative_margin_required+'px'},'fast'); 


}); 

// Handle Left Arrow Click 
$('#slider_mask .left_button').on('click', function() { 

    current_slide--; 

    if(current_slide < 0){ current_slide = total_slides-1; } 

    var negative_margin_required = current_slide*slide_width; 
    $('#slider_mask .slide_container').stop().animate({marginLeft:-negative_margin_required+'px'},'fast'); 

}); 

});

#home #slider_mask .right_button { 
    background: url(img/right-arrow-hover.png); 
    background-position: 0 0; 
} 

到:

+0

你能否解釋爲 '粘住懸停' 拿什麼給你? – 2013-03-07 17:26:31

回答

1

變化

#home #slider_mask .right_button:hover { 
    background: url(img/right-arrow-hover.png); 
    background-position: 0 0; 
}