Question

我的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');

});

}）;

Answer 1

改变这个：

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

为：

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

jquery滑块按钮卡在“悬停”上

1 个答案: