0

I have a li list with 2 items in it, which are "RMS" and "RPM". When you rollover RMS the background changes and the RPM is targeted with the following to make the RPM element change to red. I need the same thing to work for the opposite side as well (rollover RPM and the background changes but RMS isn't targeted). I can't seem to get it to work for some reason.

li:hover + li#RPM {
background-color:red;
}
li:hover + li#RMS {
background-color: #CCC;
}

JSFiddle Demo

breinhart
  • 5
  • 7

1 Answers1

1

The + CSS selector looks for the next sibling as defined. There is no previous element CSS selector. You'll probably have to accomplish this using Javascript or jQuery.

Ben Dyer
  • 1,656
  • 1
  • 12
  • 23
  • +1 That makes since, thank you. In my research earlier I found on another site that one person said it couldn't be done in css, and someone else suggested that it couldn't. – breinhart Jul 21 '14 at 19:46
  • Do either one of you have a link to point me in the right direction? I was searching for a while and finally came across this http://api.jquery.com/first-child-selector/ but I don't know how you would target the 2nd element when you hover over the 1st element. – breinhart Jul 21 '14 at 21:53
  • I don't know if this is exactly correct for your circumstances, but you can try something like this: http://jsfiddle.net/C48Wt/17/ – Ben Dyer Jul 21 '14 at 22:15
  • Thank you very much Ben! I don't have a 15 rep to vote your answer, but I greatly appreciate it. Here is the working fiddle to achieve what I needed. http://jsfiddle.net/C48Wt/70/ – breinhart Jul 22 '14 at 14:56