CODEWITHSUNDEEP
javascriptjquery
sahil sanwal
sahil sanwal

Reputation: 93

adding and removing class

I am trying to remove a class and change the image after it is clicked but for some reason it is not working. I think I'm missing out something very basic and simple. Any help will be deeply appreciated.

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

I want to replace the image in penguin1 class with image in penguin:hover.

Upvotes: 1

Views: 44

Answers (4)

symlink
symlink

Reputation: 12209

You need to add a width and height to your .stay class:

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


$("#remove").click(function() {
    $(this).removeClass('penguin1').addClass('stay');;
});
.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);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="penguin1" id="remove">
</div>

Upvotes: 2

Rajesh
Rajesh

Reputation: 24915

Your code to work fine. You should check if image paths are correct.

Note I have used background so that effect is visible.

$(document).ready(function() {
  // This code will run after your page loads
  $("#remove").click(function() {
    $(this).removeClass('penguin1').addClass('stay');;
  });
});
.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
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="penguin1" id="remove"></div>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

Your code is working, however the element seems like it disappears as you remove the .penguin1 class which sets the width and height properties: https://jsfiddle.net/zp4o0af4/

If you want to just keep the background-image after clicking, don't remove the original penguin1 class and use toggleClass to set stay instead:

$(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

Note the example above is using background-color so the effect is viewable.

Upvotes: 0

Tushar Gupta
Tushar Gupta

Reputation: 15913

You can try this : 

$("#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>

Upvotes: 0

Related Questions