Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to change DIV background when i hover a link?
    primarykey
    data
    text
    <p>Can I change a div's background image when I hover few links, I mean if I hover over link1 there is one background, link2 an other background and so on.</p> <pre><code>&lt;div style="background: url(image1.jpg) no-repeat right; "&gt; &lt;a href="#"&gt;Link 1&lt;/a&gt; &lt;a href="#"&gt;Link 2&lt;/a&gt; &lt;a href="#"&gt;Link 3&lt;/a&gt; &lt;a href="#"&gt;Link 4&lt;/a&gt; &lt;/div&gt; </code></pre> <p>Can it be done with JavaScript, or jQuery, or simple CSS trick?</p> <p>CAN ANYONE TELL ME PLEASE WHAT I AM DOING WRONG????</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script src="http://code.jquery.com/jquery-1.9.0.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $('.background-changer').on('mouseover', 'a', function () { var background = "url('" + $(this).attr('data-background') + "')"; $('.background-changer').css('background-image', background) }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div style="background:url(http://i.dailymail.co.uk/i/pix/2013/01/01/article-2255449-16B57005000005DC-878_964x641.jpg) no-repeat right;" class="background-changer"&gt; &lt;a href="#" data-background="https://twimg0-a.akamaihd.net/profile_images/1298643948/FranceFlag_svg.png"&gt;Link 1&lt;/a&gt; &lt;a href="#" data-background="http://cdn.londonandpartners.com/visit/london-organisations/houses-of-parliament/63950-640x360-london-icons2-640.jpg"&gt;Link 2&lt;/a&gt; &lt;a href="#" data-background="http://i.dailymail.co.uk/i/pix/2013/01/01/article-2255449-16B57005000005DC-878_964x641.jpg"&gt;Link 3&lt;/a&gt; &lt;a href="#" data-background="http://us.123rf.com/400wm/400/400/godrick/godrick1002/godrick100200011/6503920-tower-bridge-london-england-uk-europe-illuminated-at-dusk.jpg"&gt;Link 4&lt;/a&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload