Question

我正在尝试删除一个类并在单击后更改图像但由于某种原因它无法正常工作。我想我错过了一些非常基本和简单的东西。任何帮助都将深表感谢。

<div class="penguin1" id="remove"></div>

.penguin1:hover {
    background-image: url(../media/mound_1_hover.png);
    cursor: pointer;
}
.penguin1:active, .stay {
    background-image:url(../media/penguin_1.png);
}
.penguin1 {
    width: 200px;
    height: 200px;
    float: left;
    background-image:url(../media/mound_1.png);
}

$(document).ready(function() {
    // This code will run after your page loads
    $("#remove").click(function() {
        $(this).removeClass('penguin1').addClass('stay');;
    });
});

我想将penguin1类中的图片替换为penguin:hover中的图片。

Answer 1

您需要为.stay类添加宽度和高度：

.penguin1:active,
.stay {
    background-image: url(http://lorempixel.com/200/200/cats);
    width:200px;
    height:200px;
}

＆＃13;

$("#remove").click(function() {
    $(this).removeClass('penguin1').addClass('stay');;
});

＆＃13;

.penguin1:hover {
    background-image: url(http://lorempixel.com/200/200/sports);
    cursor: pointer;
}

.penguin1:active,
.stay {
    background-image: url(http://lorempixel.com/200/200/cats);
	width:200px;
	height:200px;
}

.penguin1 {
    width: 200px;
    height: 200px;
    float: left;
    background-image: url(http://lorempixel.com/200/200/business);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="penguin1" id="remove">
</div>

＆＃13;

Answer 2

你可以试试这个：

$("#remove").click(function() {
  $(this).removeClass('penguin1').addClass('stay');;
});

.penguin1:hover {
  background-image: url(http://placehold.it/150x150);
  cursor: pointer;
}
.penguin1:active,
.stay {
  background-image: url(http://placehold.it/200x200);
}
.penguin1 {
  background-image: url(http://placehold.it/350x150);
}
#remove {
  width: 200px;
  height: 200px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="penguin1" id="remove"></div>

Answer 3

您的代码正在运行，但是当您删除设置.penguin1和width属性的height类时，该元素似乎消失了：https://jsfiddle.net/zp4o0af4/

如果您想在点击后保留background-image，请不要移除原始的penguin1课程，而是使用toggleClass来设置stay：

$(document).ready(function() {
    $("#remove").click(function() {
        $(this).toggleClass('stay');
    });
});

.penguin1:active,
.penguin1.stay {
    /* background-image: url(../media/penguin_1.png); */
    background-color: #C00;
}

.penguin1 {
    width: 200px;
    height: 200px;
    float: left;
    /* background-image: url(../media/mound_1.png); */
    background-color: #000;
}

Updated fiddle

请注意，上面的示例使用background-color，因此效果可见。

Answer 4

您的代码可以正常工作。您应该检查图像路径是否正确。

注意 我使用了背景，以便可以看到效果。

＆＃13;

$(document).ready(function() {
  // This code will run after your page loads
  $("#remove").click(function() {
    $(this).removeClass('penguin1').addClass('stay');;
  });
});

＆＃13;

.penguin1:hover {
  background-image: url(../media/mound_1_hover.png);
  cursor: pointer;
}
.stay{
  height:100px;
  width:100px;
}

.penguin1:active,
.stay {
  background-image: url(../media/penguin_1.png);
  background:blue;
}
.penguin1 {
  width: 200px;
  height: 200px;
  float: left;
  background-image: url(../media/mound_1.png);
  background:gray
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="penguin1" id="remove"></div>

＆＃13;

添加和删除类

4 个答案:

添加和删​​除类

4 个答案:

添加和删除类