創建CSS滑塊按鈕，使其外觀類似於bbc.co.uk

Question

我正在嘗試使滑塊看起來像bbc.co.uk上的滑塊。 我遇到的問題是使按鈕看起來像BBC網站上的按鈕。 下面是到目前為止按鈕的css代碼。 但是，我似乎無法獲得定位以及它擴展為包括文本的方式。 或在懸停和大小上滑動。

http://jsfiddle.net/9AWhg/

.hero-carousel-nav {
        width: 980px;
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -490px;
        z-index: 2;
        }

        .hero-carousel-nav li {
            position: absolute;
            bottom: 48px;
            right: 48px;
            list-style: none;
            }

        .hero-carousel-nav li.prev {
            left: 48px;
            right: auto;
            }

        .hero-carousel-nav li a {
            background: #000;
            color: #fff;
            border: none;
            outline: none;
            display: block;
            float: left;
            padding: 5px 20px;
            behavior: url(/assets/PIE.htc);
            }

        .hero-carousel-nav li a:hover { 
            background: #09C;
            }

        .hero-carousel-nav li a:active,
        .hero-carousel-nav li a:focus { 
            border: none;
            outline: none;
            }

Answer 1

這個FIDDLE可能會給您一個開始。 如您的問題所述，我僅關注箭頭部分。

查找/制作一個您喜歡的jpg或png箭頭，然后將其預加載到指針div中。

將所有圖片加載到隱藏/輪播div中。

根據“點擊”功能將圖片移動到imagediv中，但不顯示它們-使用display: none; 。

在holderdiv的鼠標懸停時，顯示圖片，在鼠標懸停時將其再次隱藏。

有數百種不同的方法可以做到這一點。 我敢打賭，還會有其他好主意。

JS

var myimage = $('.carouseldiv img:nth-child(1)');    
$('.pointer').append( myimage );


$('.pointer').mouseover(function(){
  $('.pointer').css( 'background-color', '#91c5f2');
  $('.pointer img:last-child').css({ 'display': 'inline-block'
                         });
});

$('.pointer').mouseout(function(){
  $('.pointer').css('background-color', '#e0e0e0');
  $('.pointer img:last-child').css({ 'display': 'none'
                                    });

});

---

這是一種略有不同的方法，可能會給您帶來更多思考的空間。 小提琴