how to change the div background image in mouse over

Question

Possible Duplicate:
Is there any way to hover over one element and effect a different element?

How to change the div background image,in mouse over the another div,using css .

Where us your code? It depends on the relationship of the elements to determine which selector to use, or resort to JS. Please show your HTML. — Kyle, Sep 19 '12 at 07:18
See the answer to this question: http://stackoverflow.com/questions/6867257/is-there-any-way-to-hover-over-one-element-and-effect-a-different-element — skunkfrukt, Sep 19 '12 at 07:22
my code is very simple guys i put it

i want to change the iv bg while i mouse over the a tag — dean, Sep 19 '12 at 07:55

David Barker · Answer 1 · 2012-09-19T07:34:21.743

2

This will achieve what you're looking for though there are better ways to do this, using sprites and background-position for example. However:

Your HTML

<a class="selector">My Link</a>

Your CSS

.selector {
    background-image:url(myImage.jpg);
}

.selector:hover {
    background-image:url(myHoverImage.jpg);
}

Jquery solution

HTML

<a class="selector" data-type="bgChanger1">
    My Link
</a>

<div data-type="bgChanger1">
    ...
</div>

JQUERY

$(document).ready(function()
{
    var hoverElement = $('.selector'),

        dataType = hoverElement.attr('data-type'),

        linkedDiv  = $('div[data-type="' + data-type + '"]');

    hoverElement.hover(function(e)
    {
        e.preventDefault()

        linkedDiv.css('background-image', 'hoverImage.jps');
    },
    {
        linkedDiv.css('background-image', 'normalImage.jpg');
    });
});

edited Sep 19 '12 at 07:34

answered Sep 19 '12 at 07:17

David Barker

14,484
3
48
77

no i meant if i mouse over some div the another background image for another div change not same div – dean Sep 19 '12 at 07:21
You cant do that directly with CSS alone, you could hack it a bit and put an absolute positioned div that's a child of the hover element, and move that wherever you want though I would just use Javascript... – David Barker Sep 19 '12 at 07:21
Yes, a much better choice for this ^^ – David Barker Sep 19 '12 at 07:23
how? do u have a code for that ?? – dean Sep 19 '12 at 07:24
@dean You **do not** _need_ to use jQuery for this, please post your HTML and there is a large chance you can do this with CSS alone! – Kyle Sep 19 '12 at 07:29
see the problem is i have

i need in mouse over the a tag the div only inside change the bg image can i do that in css – dean Sep 19 '12 at 07:31
@Kyle, sure I havent seen the HTML but he seems to want to change a non child elements css on hover. As far as I am aware that is not possible with CSS alone. – David Barker Sep 19 '12 at 07:35
@dean added rough jquery to achieve what you were requesting in the answer – David Barker Sep 19 '12 at 07:37
@David, with the markup he supplied, it is possible. Dean: gave you an answer free of jQuery. – Kyle Sep 19 '12 at 07:46
He didn't supply any markup still... thanks for your answer it is definitely elegant. – David Barker Sep 19 '12 at 07:52
Thanks :) There was some markup in a comment somewhere. Turned out he was asking about children, so it would work :) +1 for your solution too. – Kyle Sep 19 '12 at 08:01
@ Kyle Sevenoaks thanks man it's work fine – dean Sep 19 '12 at 09:29

score 2 · Accepted Answer · answered Sep 19 '12 at 07:45

With the markup you supplied, this is indeed possible with CSS alone:

<a>
    <img src="http://placehold.it/100x100" /> 
    <div> 
    </div>
</a>

You can use the :hover pseudo selector to select the div when the anchor has been hovered

a:hover div
{
    background-image: url(http://placehold.it/400x400);
}

This will change the div's background when the anchor is hovered. This doesn't work in all cases, you must be aware of the relationship of the elements and use the appropriate selector. If the elements have no relationship, you will have to use Javascript (or one of its libraries.)

http://jsfiddle.net/Kyle_Sevenoaks/fPGU3/

thanks Kyle this is work also i prefer this – dean Sep 19 '12 at 08:00 — dean, Sep 19 '12 at 08:00

score 1 · Answer 3 · answered Sep 19 '12 at 07:29

1

You can use jquery to do this.

Your markup:

<div id="div1"></div>
<div id="div2"></div>

Your script:

$("#div1").mouseover( function() {
   $("#div2").css("background-image", "url('image.png')");
});

answered Sep 19 '12 at 07:29

Alexander Matlin

31
1
6

thanks man this is simple and easy :) :) – dean Sep 19 '12 at 07:46

sufinsha · Answer 4 · 2012-09-19T08:06:22.210

0

just add a jquery script as follows:

 $(document).ready(function() {
    $('#div1').hover(function(){
      $('#div2').css("background","url(image_url)");
    });
 });

edited Sep 19 '12 at 08:06

answered Sep 19 '12 at 07:52

sufinsha

755
6
9

This is not a css solution as asked dean. – Armel Larcier Sep 19 '12 at 09:56
i dont think that we can do it with css alone beacause as asked the backgound of another div has to be changed on mouse over to a particular div.so it requires some script. – sufinsha Sep 20 '12 at 03:23
Armel,if you get a simpler solution,please do share. – sufinsha Sep 20 '12 at 03:34

how to change the div background image in mouse over

4 Answers4

Linked