CODEWITHSUNDEEP
javascriptcss
drewwyatt
drewwyatt

Reputation: 6027

Changing multiple elements with CSS?

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.

Upvotes: 6

Views: 2081

Answers (9)

Ashwin
Ashwin

Reputation: 12431

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.

Upvotes: -1

Dharmesh
Dharmesh

Reputation: 973

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

Upvotes: 0

Shion
Shion

Reputation: 1499

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

Upvotes: 0

Blender
Blender

Reputation: 298582

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")');
});

Upvotes: 3

rockerest
rockerest

Reputation: 10518

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]
            });
        }
    );
})

Upvotes: 0

mo-getter
mo-getter

Reputation: 156

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.

Upvotes: 1

Dan
Dan

Reputation: 1559

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.

Upvotes: 2

Vishal Pawar
Vishal Pawar

Reputation: 4340

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

this is the style that you want

Upvotes: 0

Jakub
Jakub

Reputation: 20473

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.

Upvotes: 0

Related Questions