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

Question

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?

Answer 1

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

Answer 2

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