change another div's styling using only css

Question

Using css i created this hover map in my site: http://travel-fellow.com/destinations While you hover on continent it will change color. but there is another list at the bottom and i could not make it work while hovering on the other list. Html:

<ul id="continents">
<li class="northamerica"><a href="">North America</a></li>
<li class="southamerica"><a href="">South America</a></li>
<li class="asia"><a href="">Asia</a></li>
<li class="australia"><a href="">Australia</a></li>
<li class="africa"><a href="">Africa</a></li>
<li class="europe"><a href="">Europe</a></li>
</ul>

<ul id="continentslist">
     <li class="northamerica2"><a href="">North America</a></li>
    <li class="southamerica2"><a href="">South America</a></li>
    <li class="asia2"><a href="">Asia</a></li>
    <li class="australia2"><a href="">Australia</a></li>
    <li class="africa2"><a href="">Africa</a></li>
    <li class="europe2"><a href="">Europe</a></li>
</ul>

and css:

ul#continents {
    background: url("continents-540.png") no-repeat scroll 0 0 transparent;
    height: 268px;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 580px;
}
ul#continents li {
    position: absolute;
}
ul#continents li a {
    display: block;
    height: 100%;
    text-indent: -9000px;
}
ul#continents li.northamerica {
    height: 163px;
    left: 0;
    top: 2px;
    width: 237px;
}
.southamerica {
    height: 124px;
    left: 116px;
    top: 164px;
    width: 93px;
}
.africa {
    height: 97px;
    left: 209px;
    top: 132px;
    width: 116px;
}
.europe {
    height: 113px;
    left: 239px;
    top: 19px;
    width: 87px;
}
.asia {
    height: 182px;
    left: 304px;
    top: 12px;
    width: 168px;
}
.australia {
    height: 95px;
    left: 390px;
    top: 152px;
    width: 114px;
}
ul#continents li a:hover {
    background: url("continents-540.png") no-repeat scroll 0 0 transparent;
}
ul#continents li.northamerica a:hover {
    background-position: -221px -318px;
}
ul#continents li.southamerica a:hover {
    background-position: 10px -536px;
}
ul#continents li.africa a:hover {
    background-position: -243px -537px;
}
ul#continents li.europe a:hover {
    background-position: -401px -514px;
}
ul#continents li.asia a:hover {
    background-position: -34px -324px;
}
ul#continents li.australia a:hover {
    background-position: -92px -527px;
}

Because i'm using joomla i'm trying to avoid using jquery.

A bit of research and [this](http://stackoverflow.com/questions/1462360/css-hover-one-element-effect-for-multiple-elements) comes up . — Patsy Issa, Jul 16 '13 at 13:20

Kevin Lynch · Answer 1 · 2013-07-16T18:25:48.833

3

You can do it using pure CSS

DEMO http://jsfiddle.net/kevinPHPkevin/daFDn/1163/

img.tree:hover ~ ul .tree {
    background:#ccc;
}

img.lion:hover ~ ul .lion {
    background:#ccc;
}

In your case you would assign the country hover to the correct list element. Ive used two random pictures just for examples sake, but the theory applies. These selectors are supported IE7+

EDITED

If you want to support all browsers then offer a jQuery backup support, or a jQuery only solution

DEMO http://jsfiddle.net/kevinPHPkevin/daFDn/1167/

$('.lion-img').hover(
  function () {
    $('.lion').addClass('active');
  }, 
  function () {
    $('.lion').removeClass('active');
  }
);
$('.tree-img').hover(
  function () {
    $('.tree').addClass('active');
  }, 
  function () {
    $('.tree').removeClass('active');
  }
);

edited Jul 16 '13 at 18:25

answered Jul 16 '13 at 13:53

Kevin Lynch

24,427
3
36
37

Never heard about the ~ operator before. – jao Jul 16 '13 at 13:57
1

It works in the same way as `+` but will work when an element is not adjacent to the element you wish to effect. – Kevin Lynch Jul 16 '13 at 13:59
Nice solution. Looked up '~' and here's an article on both '~' and '+' - http://css-tricks.com/child-and-sibling-selectors/ – Joe_G Jul 16 '13 at 14:01
I'm not sure what i'm doing wrong but it's still not working. not with ~ and not +. maybe it's because i'm trying to change other element background position? – user2587454 Jul 16 '13 at 20:43

change another div's styling using only css

1 Answers1