CODEWITHSUNDEEP
javascriptjquery
Dr Manhattan
Dr Manhattan

Reputation: 14057

change the background image of one div when the mouse is over a different div

I want to change the background image of one div when the mouse is over a different div, using jQuery.

jQuery(function() {
  jQuery('.linktomouseover').mouseover(function() {
    $(.linktomouseover2).css('background-image', "url('test.jpg')");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="linktomouseover">
  <a class="nthn">link1</a>
</div>
<div class="linktomouseover2">
  <a class="test">link2</a>
</div>

So when mouse is over div with class linktomouseover it will actually change the background of div with class linktomouseover2

this does not seem to work. please help?

Upvotes: 1

Views: 62

Answers (2)

mostafaznv
mostafaznv

Reputation: 988

this is a mistake on your code.

jQuery:

jQuery('.linktomouseover2').mouseover(function() {
        $('.linktomouseover').css('background-image', "url('http://cdn.androidpolice.com/wp-content/uploads/2012/11/nexusae0_wallpaper_01.jpg')");
    });

HTML:

<div class="linktomouseover">
    <a class="nthn">link1</a>
</div>
<div class="linktomouseover2">
    <a class="test">link2</a>
</div>

CSS:

.linktomouseover{
    position:relative;
    display:block;
    width:100%;
    background:#e7e7e7;
    height:200px;
}
.linktomouseover2{
    position:relative;
    display:block;
    width:100%;
    background:#d7d7d7;
    height:200px;
}

Live Demo On JSFiddle

Upvotes: 1

Pbk1303
Pbk1303

Reputation: 3802

You're missing quotes in the code jQuery(.linktomouseover)

This is the correct code

jQuery(function() {
    jQuery(".linktomouseover").mouseover(function() {
        jQuery(".linktomouseover2").css('background-image', "url('test.jpg')");
    });
});

DEMO

Upvotes: 1

Related Questions