-1

I have created a parent div. Inside that div there are multiple child divs: the first one is holding a background image, the second one, the website name, and the third one, some text.

Using jQuery, when a user hovers on the second div, i.e. website name div, the third div i.e text div is visible.

Now what I want is, when the text div becomes visible, to also replace the image in the first div. Here is my HTML and jQuery code so far:

HTML:

<div class="layer-3" style="opacity: 1;">
        <a href="#">
            <div class="contentImg3">{Div holding the image as a background}</div>

            <div class="contentBlock3" style="opacity: 1;">
                <span class="btn-block">
                    <span class="help-block webHdln">Website Name</span>
                </span>
            </div>

            <div class="contentText3">text Div</div>
        </a>                
        </div>
        <!-- .layer-2 ENDS -->

JS:

$(".contentBlock3").mouseenter(function () {
        $('.contentText3').fadeIn(1500);
        $('.contentImg').css("background-image", "images/gurus_bw.jpg)");
        $('.contentImg').css("background-position", "top 30px)");
    });

The CSS line is not working... What am I doing wrong ?

Marventus
  • 864
  • 1
  • 7
  • 14
mkb
  • 81
  • 4
  • 5
  • 20
  • Can't see any element with `class="contentImg"` in addition to the point mentioned in the existing answer. – Harry Jan 04 '15 at 13:41
  • Your HTML code is a W3C validation nightmare. You can't place block elements inside link tags! You should replace those links with divs. The way I would do this is swapping CSS classes on your `.contentImg` elements. I would define a normal background image in your css stylesheet: `.contentImg3 { background: url("image/url") no-repeat center center;}` and specify another class, say, `swapImg`, with a different background image. Then on the JS side of things, simply do `$('.contentImg3').addClass('swapImg');` on `mouseenter`and `$('.contentImg3').removeClass('swapImg');` on `mouseleave`. – Marventus Jan 04 '15 at 14:07
  • thank @Marventus for ur solution for replacing the classes... It worked perfectly.... – mkb Jan 05 '15 at 07:49

1 Answers1

2

change

$('.contentImg').css("background-image", "images/gurus_bw.jpg)"); // miss: url(..

to

$('.contentImg').css("background-image", "url(images/gurus_bw.jpg)");

read CSS background-image Property

Simone Nigro
  • 4,717
  • 2
  • 37
  • 72