Change background of class only on hover (with javascript)

Question

I'd like this piece of javascript to change only on hover instead of making it a permanent background.

<script type="text/javascript">
$(function () {
    $('ul.slideshow-menu').find('a').fadeTo('slow', 1);
    $('ul.slideshow-menu').find('a').hover(function () {
        $(this).fadeTo('fast', 1);
        $('.pikachoose').css({
            'background-image': 'url(' + $(this).attr('src') + ')'
        });
    }, function () {
        $(this).fadeTo('slow', 1);
    });
});
</script>

Right now it looks for an image i set in my "a href" tag and it takes this url to the class ".pikachoose" and replaces its background image. I want it to do this only on HOVER and when nothing is hovered it changes back to the original background-image.

Anyone got any ideas?

Patsy Issa · Accepted Answer · 2013-07-17 12:24:45Z

1

In your second function simply set the pikachoose css back to the original url lile so :

$('ul.slideshow-menu').find('a').hover(function(){
  $(this).fadeTo('fast', 1);
  $('.pikachoose').css({ 'background-image' : 'url('+$(this).attr('src')+')' });
}, function(){
$(this).fadeTo('slow', 1);
$('.pikachoose').css({ 'background-image' : 'url(youroriginalurl)' });
});

answered Jul 17, 2013 at 12:24

Patsy Issa

11.3k5 gold badges57 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Erik Schierboom · Accepted Answer · 2013-07-17 12:24:14Z

0

$('.pikachoose').css({ 'background-image' : 'url(/'+$(this).attr('src')+')' });

edited Jul 17, 2013 at 12:24

Erik Schierboom

16.7k10 gold badges67 silver badges82 bronze badges

answered Jul 17, 2013 at 12:23

PSR

40.4k43 gold badges115 silver badges154 bronze badges

Comments

dashme · Accepted Answer · 2013-07-17 12:30:25Z

0

it should look like this :

$(function(){
        ('ul.slideshow-menu').find('a').hover(function(){
        $('.pikachoose').css({'background-image':'url(/'+$(this).attr('src')+')' });
        });

answered Jul 17, 2013 at 12:30

dashme

735 bronze badges

Comments

Sudarshan Tanwar · Accepted Answer · 2013-07-17 12:51:59Z

0

Try this

 $(document).ready(function () {
        $(".a").on("mouseover", function () { this.style.backgroundImage = url('new image url'); });
        $(".a").on("mouseout", function () { this.style.backgroundImage = url('default image url'); });
    });

HTML

 <div class="a" style="width: 100px; border: 1px solid black;">
    Hello, i am div1
</div>
<div class="a" style="width: 100px; border: 1px solid black;">
    Hiii i am div2
</div>

edited Jul 17, 2013 at 12:51

answered Jul 17, 2013 at 12:44

Sudarshan Tanwar

3,6173 gold badges27 silver badges39 bronze badges

Collectives™ on Stack Overflow

Change background of class only on hover (with javascript)

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related