Changing multiple elements using CSS?

Question

If it was asked before I sincerely apologize. After about half an hour of searching, I cannot find one “best answer”, and most of the solutions I came across seem to be related to JavaScript. Although I'm not completely against JavaScript - HTML, CSS, and PHP are definitely my more powerful skills. If this cannot be done without using JavaScript, I will probably need a serious conversation with the child. Here is my question:

I would like to change the background image of one element as a hang state of a completely 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'); } } 

Hope this gives a clear message of my perfect solution. Thanks guys.

Answer 1

CSS cannot do this. CSS is designed to be read in turn and very fast, so logic is not something that should be done in CSS.

With this you can do this:

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

Iff your HTML is like this:

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

This works because the selector matches the #child_div owned by :hover ed .some_element .

If you plan to use jQuery, this skeletal code will do the job:

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

Answer 2

This can be done in pure CSS, but only if the element you want to change the background image is a child of the element you are hanging over. For instance:

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

If this is not a child, you will need JavaScript.

Answer 3

You must use a comma if you want to apply the same styles to multiple selectors. If you just separate them with a space, this means that the latter must be a child of the first in order to match. It looks like you are asking:

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

Translation into English: all elements hanging with the class "some_element", as well as an element with id "some_unrelated_div" will have a path to the background image / to / img.jpg.

Answer 4

For this you need to use Javascript / jQuery, as this is an event caused by a hang event on another element (e.g. menu button, etc.).

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

Answer 5

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

this is the style you want

Answer 6

You can use jQuery to achieve your desire. Here, whenever a user hovers over this element, the jQuery function is automatically called, after which you can put your own code to change the return URL of the image ....

and if you want a link, follow this link here

Answer 7

As far as I know, CSS cannot do this kind of thing. There MAY be a way to make a terrible chain of selectors if #some_unrelated_div is a distant child of .some_element .

It is best to include the jQuery library (for example):

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

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

[Unverified front page 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] }); } ); }) 

Answer 8

Perhaps you can also do this using CSS.

But this is only possible if you have a div somehow as adjacent.

I made you JS-Fiddle: jsFiddle

The key part is the following:

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

Here is a link to w3c Specifications about ~ -Selector: Click me

Answer 9

For this you need to use javascript or jQuery.

However, there is a workaround to achieve only css usage. And this should use the relationship between parent and child elements.

suppose div2 is inside div1 so you will need to add css as

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

If you do not want div2 to look like inside div1, you can add a position: absurd. As below:

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

But I will always use jQuery for this.