Changing multiple elements with CSS?

Question

If this has been asked before I sincerely apologize. After around half an hour of searching I cannot seem to find one "best answer," and most solutions I have come across seem to involve JavaScript. While I am not totally opposed to JavaScript - HTML, CSS, and PHP are definitely my stronger skillsets. If this cannot be done without using JavaScript, I will probably need some serious baby talk. Here's my question:

I would like to change the background image of an one element as the hover state of an entirely separate element. Here is an example of how I would like this to work:

.some_element:hover {
    #some_unrelated_div {
         background-image: url('path/to/img.jpg');
    }
}

I hope that conveys a clear enough message of my ideal solution. Thanks guys.

You might be able to DOM traverse to the element, but I don't think CSS has a parent selector, so it's going to be VERY difficult. In short, this is a problem requiring a Javascript solution. Luckily for you, a dash of jQuery and 3 lines of code will do the trick. — rockerest
– rockerest, Commented Dec 6, 2011 at 6:42
I don't think CSS will do the trick unless #some_unrelated_div is actually related i.e. is a child of .some_element and inherits the background from it. — Milo LaMar
– Milo LaMar, Commented Dec 6, 2011 at 6:44
CSS could be used if the unrelated div is a descendant of some_element. I assume not since you say it's unrelated, but this can be accomplished with JavaScript. Could you post the markup so we can be sure the elements are unrelated? — andyb
– andyb, Commented Dec 6, 2011 at 6:45
making him install jquery might be making mountains out of molehills. I suggest a basic javascript answer. — Milo LaMar
– Milo LaMar, Commented Dec 6, 2011 at 6:46
@Blender I rescind my comment as I've forgotten how to write javascript myself. — Milo LaMar
– Milo LaMar, Commented Dec 6, 2011 at 7:49

Blender · Accepted Answer · 2011-12-06 07:02:20Z

3

CSS cannot accomplish this. CSS is meant to be read line-by-line and very quickly, so logic isn't something that should be done in CSS.

That being said, you can do this:

.some_element:hover #child_div {
  background-image: url('path/to/img.jpg');
}

Iff your HTML is similar to this:

<div class="some_element">
  <div id="child_div">Hello</div>
</div>

This works because the selector matches the #child_div belonging to a :hovered .some_element.

If you plan on using jQuery, this skeleton code will accomplish the job:

$('#trigger').hover(function() {
  $('#some_element').css('background-image', 'url("foo.png")');
}, function() {
  $('#some_element').css('background-image', 'url("bar.png")');
});

edited Dec 6, 2011 at 7:02

answered Dec 6, 2011 at 6:43

Blender

300k55 gold badges462 silver badges511 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

drewwyatt Over a year ago

This helped a ton. You guys are right, I really do need to start using JQuery more. Thanks a million. RESOLVED

Dan · Accepted Answer · 2011-12-06 06:44:58Z

2

This can be done in pure CSS but only if the element that you wish to change the background image of is a child of the element you are hovering over. For example:

#element1:hover #element2 {
    background-image: ...
}

If it is not a child then you will need JavaScript.

answered Dec 6, 2011 at 6:44

Dan

1,5591 gold badge15 silver badges18 bronze badges

Comments

mo-getter · Accepted Answer · 2011-12-06 06:54:17Z

1

You must use a comma if you wish to apply the same styles to multiple selectors. If you only separate them by a space, it implies that the latter must be a child element of the former in order to match. What it sounds like you're asking for is:

.some_element:hover, #some_unrelated_div {
  background-image: url('path/to/img.jpg');
}

Translation to English: All elements hovered over with class "some_element", as well as the element with id "some_unrelated_div" will have background image path/to/img.jpg.

answered Dec 6, 2011 at 6:54

mo-getter

1563 bronze badges

Comments

Jakub · Accepted Answer · 2011-12-06 06:41:25Z

0

You will need to use Javascript / jQuery for this, as it is an event triggered by a hover event on another element (like a menu button, etc).

CSS will style the elements for you, and you can use something like toggle() in jQuery to achieve this, but you ultimately need to create this functionality using JS.

answered Dec 6, 2011 at 6:41

Jakub

20.5k8 gold badges67 silver badges93 bronze badges

Comments

Vishal Pawar · Accepted Answer · 2011-12-06 06:42:34Z

0

.some_element:hover #some_unrelated_div {
         background-image: url('path/to/img.jpg');
    }

this is the style that you want

answered Dec 6, 2011 at 6:42

Vishal Pawar

4,3384 gold badges32 silver badges56 bronze badges

1 Comment

Erik Funkenbusch Over a year ago

This only works if #some_unrelated_div is a decendant of .some_element. I got the impression that this was not the case.

rockerest · Accepted Answer · 2011-12-06 06:57:35Z

0

To my knowledge, CSS can't do this kind of stuff. There MAY be a way to make a horrible chain of selectors if #some_unrelated_div is a distant child of .some_element.

Your best bet is including the jQuery library (like so):

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Then, in a script tag or an included file, write the following jQuery:

[Untested, first-draft code]

//this just waits for the DOM to finish loading
$(function(){

    //this selects .some_element and waits for the "hover" event
    $('.some_element').hover(

        // This is the function that executes when hover STARTS.
        function(){

            // this selects #some_unrelated_div and edits its CSS (an object)
            $('#some_unrelated_div').css({
                'background-image' : "url('path/to/img.jpg')"
            });
        },

        // This is the function that executes when hover ENDS.
        function(){
            $('#some_unrelated_div').css({
                'background-image' : [original style]
            });
        }
    );
})

edited Dec 6, 2011 at 6:57

answered Dec 6, 2011 at 6:50

rockerest

10.5k3 gold badges39 silver badges67 bronze badges

4 Comments

Blender Over a year ago

No horrible chain of selectors is needed. foo bar matches any bar that is a descendant of foo.

rockerest Over a year ago

@Blender You're right. I was getting my CSS scenarios mixed up, but all of the ones that would need a horrible chain wouldn't even work any way.

Blender Over a year ago

Try adding a second callback to your hover. You have to swap the image back somehow.

rockerest Over a year ago

@Blender Woops thanks. I guess this could use a variable to store the original background, but I think that might be a little too much for right now.

Shion · Accepted Answer · 2011-12-06 07:15:38Z

0

Maybe you could also do this with CSS.

But that's only possible if you have the div's somehow as adjacents.

I made you a JS-Fiddle: jsFiddle

The key part is this:

#hoveredDiv:hover ~ div > #target
{
    background-color: #f00;
}

Here is the link to the w3c Specs about the ~-Selector: Click me

answered Dec 6, 2011 at 7:15

Shion

1,4992 gold badges14 silver badges29 bronze badges

Comments

Dharmesh · Accepted Answer · 2011-12-06 08:00:36Z

0

You can use jQuery to achieve your desire. Here when ever user hovers the mouse on that element automatically jQuery Function will be called and after that you can put your own code to change the back-ground image url....

and if you want the reference then visit this link here

edited Dec 6, 2011 at 8:00

answered Dec 6, 2011 at 6:48

Dharmesh

9734 gold badges15 silver badges26 bronze badges

1 Comment

Blender Over a year ago

Care to...expand a bit on this? Linking to a website isn't really considered an answer, but more of a comment.

jwheron · Accepted Answer · 2011-12-06 08:46:46Z

-1

You will need to use javascript or jQuery to achive this.

However there is a workaround to achieve only using css. And that is to use parent-child element relationship.

let us assume div2 is inside div1 so you will need to add css as

#div1:hover #div2 {background-color:#F00}

If you don't want the div2 to look like inside div1 then you can add position:absulute to it. As below:

#div1 {position:relative; width:100px; height:100px}
#div2 {position:absolute; top:0; left:200px; height:100px}

But I will always like to use jQuery to do this.

edited Dec 6, 2011 at 8:46

jwheron

2,5722 gold badges30 silver badges40 bronze badges

answered Dec 6, 2011 at 6:48

Ashwin

12.5k22 gold badges87 silver badges119 bronze badges

Collectives™ on Stack Overflow

Changing multiple elements with CSS?

9 Answers 9

1 Comment

Comments

Comments

Comments

1 Comment

4 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

1 Comment

Comments

Comments

Comments

1 Comment

4 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related