Question

我正在尝试让DIV在悬停时显示突出显示的图像，但在点击时会一直显示突出显示，再次点击时它应该恢复原样。

到目前为止，我已成功悬停并在点击时显示突出显示的图像。但是当我再次点击时，我无法将其恢复为正常悬停状态。

这是我的代码：

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

Answer 1

有多种方法可以实现这一点，一种方法是为您喜欢的按钮创建一个活动状态类，并使用与.fav:hover相同的样式。然后只需切换课程：

<强> CSS

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

<强>的JavaScript

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

JSFiddle

Answer 2

删除第3行：

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

IF总是评估为真。

并添加此css：

background-position-y: 0%;

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

Answer 3

然后使用：

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

并添加你的css文件：

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

如何在保持悬停的同时使div切换背景位置“onclick”

3 个答案: