1

I have two divs:

<div>
  <a id="changecolor">Change Color</a>
</div>

<div id="tobechanged">
  Change My Color
</div>

I have two questions:

  1. How can I use CSS only to make it so that the background color of #tobechanged changes when I hover on "#changecolor"?
  2. Is there a way, using only CSS3, such that clicking on "changecolor" would trigger the CSS color change instead of an on hover?

The following is what I tried:

#changecolor:hover + #tobechanged {
 background:yellow;
}

This works only when I have something like this:

<div>
  <a id="changecolor">Change Color</a>
  <div id="tobechanged">
    Change My Color
  </div>

</div>

But I do not want to have "tobechanged" be a sibling or child of "changecolor".

TylerH
  • 20,799
  • 66
  • 75
  • 101
Rolando
  • 58,640
  • 98
  • 266
  • 407
  • 1
    have you tried anything? had any errors? you have to show atleast some understanding of the problem... – celeriko Apr 25 '14 at 18:34
  • Code hidden without code block, fixed formatting of question. – Rolando Apr 25 '14 at 18:36
  • 1
    Check this : http://stackoverflow.com/questions/16912023/css3-transition-click-event – Maverick Apr 25 '14 at 18:42
  • CSS (CASCADING Style Sheets) - why no simple Javascript? IMHO - not possible using only CSS (as the question is written) and certainly not worth the effort to maintain if it was. – Upperstage Apr 25 '14 at 18:43
  • for your 2nd question Maverick has already answered your question, and for the 1st one: [this example](http://stackoverflow.com/questions/8614423/how-to-change-one-element-while-hovering-over-another) and also [this one](http://stackoverflow.com/questions/5441662/changing-properties-of-one-div-element-when-hovering-above-other-div-elements) but in both cases they nest divs (the way you don't want) – Frakcool Apr 25 '14 at 18:51
  • @Frakcool, that is why I am asking for a possible solution for the non-nested case. – Rolando Apr 25 '14 at 18:53
  • I'm looking for a solution, just providing those links in case they could help. Btw you don't want to use Jquery right? – Frakcool Apr 25 '14 at 18:54
  • You need some hidden input checkbox **before** the clicked element to save the state of click (toggle) and from which you can traverse forwards to the clicked element to style it. (we can't traverse backwards in CSS), try this [demo](http://jsfiddle.net/q7mxv/) – King King Apr 25 '14 at 19:00

2 Answers2

0

You can use the ~ instead of the + like this:

#changecolor:hover ~ #tobechanged {
 background:yellow;
}

As for the click, that won't work, as far as I know, with css only.

Reference post, not exact duplicate: Change another div style from div hover

I made a Fiddle and it seems like there is no way to address a parent sibling in pure css. You can see the two differences in the fiddle. I also showed the 'active' psuedo to give in idea of your 'click' css change limits.

You can get around it by doing it on the div of the a, but you might get some undesired effects.

Community
  • 1
  • 1
JasonWilczak
  • 2,303
  • 2
  • 21
  • 37
0

Ok after checking your code again and looking at this topic

I found your 1st div:

<div>
  <a id="changecolor">Change Color</a>
</div>

<div id="tobechanged">
  Change My Color
</div>

had no id name, after changing that with:

<div id = "mycolor">
  <a id="changecolor">Change Color</a>
</div>

<div id="tobechanged">
  Change My Color
</div>

And the CSS as:

#mycolor:hover + #tobechanged {
    background:yellow;
}

I was able to change it.

BUT I'm not sure if you want to change color on div:hover or a:hover (calling them by ID) so if you want it on a:hover:

Then there's no need to have the 1st div containing <a> element so HTML could be like this:

<a id="changecolor">Change Color</a>

<div id="tobechanged">
  Change My Color
</div>

and CSS like:

#changecolor:hover + #tobechanged {
    background:yellow;
}

Look for this for mycolor:hover fiddle and this for changecolor:hover

Hope this helps

And for your 2nd question @Maverick gave you the answer or a usefull link

Community
  • 1
  • 1
Frakcool
  • 10,915
  • 9
  • 50
  • 89