如何在保持懸停的情況下製作div切換背景位置「onclick」

-1

我試圖製作一個DIV以在懸停時顯示突出顯示的圖像，但在點擊時繼續顯示突出顯示，再次單擊時應該恢復爲如何是。如何在保持懸停的情況下製作div切換背景位置「onclick」

到目前爲止，我點擊鼠標懸停並顯示突出顯示的圖像。但是當我再次點擊時，我無法恢復到正常的懸停狀態。

這裏是我的代碼：

的jsfiddle： http://jsfiddle.net/muLzfzfu/

HTML：

<div class="row"> 
    <div class="fav"></div> 
    <div class="label">Option #1</div> 
    <br clear="all" /> 
</div> 
<div class="row"> 
    <div class="fav"></div> 
    <div class="label">Option #2</div> 
    <br clear="all" /> 
</div> 
<div class="row"> 
    <div class="fav"></div> 
    <div class="label">Option #3</div> 
    <br clear="all" /> 
</div>

CSS：

.fav { 
    background-repeat:no-repeat; 
    background-position:top; 
    width:26px; 
    height:25px; 
    float:left; 
    background-image:url(http://highviewsweb.com/temp/fav.png); 
    cursor:pointer; 
} 
.fav:hover { 
    background-position:bottom; 
} 
.row{ 
    background-color:#eee; 
    margin-bottom:1px; 
}

的JavaScript：

$(document).ready(function(){ 
    $('.fav').click(function(){ 
     $(this).css('background-position-y','0%'); 
     if($(this).css('background-position-y') == '0%'){ 
      $(this).css('background-position-y','100%'); 
     } else { 
      $(this).css('background-position-y','0%'); 
     } 
    }); 
});

來源

2014-09-26 user2955412

有多種方式來實現這一目標，一個是創建您最喜愛的按鈕激活狀態類，並有這樣的使用相同的樣式，.fav:hover。然後，只需切換類：

CSS

.fav:hover, .fav-active { 
    background-position:bottom; 
}

的JavaScript

$('.fav').click(function() { 
    var $this = $(this); 
    $this.toggleClass('fav-active'); 
});

JSFiddle

來源

2014-09-26 14:52:20 George

謝謝！它工作完美！ – user2955412 2014-09-26 15:01:05

很高興有幫助。 – George 2014-09-26 15:01:26

取出第三行：

//$(this).css('background-position-y','0%');

IF總是評估爲真。

並添加此CSS：

background-position-y: 0%;

例子：http://jsfiddle.net/muLzfzfu/3/

來源

2014-09-26 14:52:35 Scott

並且怎麼樣使用：

$(document).ready(function(){ 
    $('.fav').click(function(){ 
     $(this).toggleClass('active'); 
    }); 
});

，並在你的CSS文件中添加：

.fav.active{ background-position: bottom; }

？

來源

2014-09-26 14:56:04 menghi

如何在保持懸停的情況下製作div切換背景位置「onclick」

回答

相關問題