How do I make a hover element change the state of 3 other elements?

Question

This is my closest answer I can find but I am struggling to implement this with a graphic / navigation I have to do. I hope you can help.

You can see my fiddle here: https://jsfiddle.net/SteveDavies/nxcw9w4f/

I have two parts, the part of the right are 3 menu items. When I hover over the grey, I want the green and pink to change (opaque). When I hover over the green, I want the grey and pink to change and when I hover over the pink, I want the green and grey to change.

AT THE SAME TIME

What ever is opaque on the menu area will be opaque on the globe.

I need to then get it to work backwards, when I float over the pink area of the globe, the other two areas are greyed out and in the menu area to grey out too.

I hope this makes sense.

I thought about using z-index to layer the 3 parts of the globe but I don't think this will work?

Image of the globe also attached.

Hope you can help!

Steve

This sounds pretty easy to do with jQuery, are you set on just CSS? — Talya S, Sep 23 '15 at 09:59
You can use the sibling selector `+` to change the element that comes directly after the hovered element, but you can't affect the element before it, i.e. you can't make it work backwards. The best thing here IMO is a JavaScript/jQuery solution, which can be done with a tiny amount of code. — Paul Redmond, Sep 23 '15 at 10:01
Yes, happy to use some JavaScript, any ideas where I could get this? Sorry for being so vague / ignorant. — S Davies, Sep 23 '15 at 10:08
You mentioned layering the 3 parts of the globe, do you have it actually set up as 3 separate images? I would probably use a sprite https://css-tricks.com/css-sprites/ (where in one image you have 3 images of the globe, each with one layer opaque) — Talya S, Sep 23 '15 at 10:12
Hi @Tayla S, a sprite might seem the best way to go, but will have to figure out how they work. Eek — S Davies, Sep 23 '15 at 10:20
That's why I linked to an explanation ;) I'll see if I can make you a fiddle with some placeholder sprite — Talya S, Sep 23 '15 at 10:39
Thanks @Tayla S, I read the explanation, but still over my head! Looking forward to your fiddle. — S Davies, Sep 23 '15 at 10:51

score 0 · Answer 1 · answered Sep 23 '15 at 10:10

0

I worked up a quick demo for you. Is this what you're looking for:

http://codepen.io/anon/pen/NGRxzR

<div>
<ul>
  <li class="green">Green</li>
  <li class="blue">Blue</li>
  <li class="pink">Pink</li>
</ul>
</div>

ul{
  list-style: none;
  font-family: Arial;
}

ul li{
  padding: 5px;
  opacity: 0.3;
}

ul li.full{
  opacity: 1;
}

.green{
  background: green;
}

.blue{
  background: blue;
}

.pink{
  background: pink;
}

$(document).ready(function() {
  $('ul li').hover(function() {
    $('ul li').not($(this)).toggleClass('full');
  });
});

answered Sep 23 '15 at 10:10

Paul Redmond

3,276
4
32
52

Many thanks for this - this seems to work but the menu items need to be an image rather than a list. I have to position them in a particular way. I just trued to replace the ul / li with a div class of 'menu' and then replace 'ul li' in the JavaScript with menu but that didn't work – S Davies Sep 23 '15 at 10:18
Yes the demo is more of a proof on concept. For your image above, you could try placing the 3 images as multiple background images, see: https://css-tricks.com/stacking-order-of-multiple-backgrounds/ – Paul Redmond Sep 23 '15 at 10:21
You can then add/remove the classes needed to change the images. – Paul Redmond Sep 23 '15 at 10:21

score 0 · Accepted Answer · edited May 23 '17 at 11:51

I created something: https://jsfiddle.net/nxcw9w4f/2/

I'm afraid it's a little complicated and you'll probably have to learn some new skills and concepts to recreate it but I don't see a simpler way to achieve this, maybe someone else will. I used an image map to recognize the hover over the complicated shapes (the actual image in the image map is a transparent GIF https://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/ because we need to use CSS background-image instead for the sprite), you'd have to create your own with the coordinates of your own image. This is the sprite I created: http://s9.postimg.org/lpcnlmp7j/circlesprite.gif

Using jQuery (https://api.jquery.com/hover/) I changed the class of the container based on the element you hover on. This works for both the menu items and the globe items since they have the same class (gray, pink or green).

$('.gray').hover(function(){
    $('#container').addClass('hover grayHover');
},
function(){
    $('#container').removeClass('hover grayHover');    
});

This changes the position of the background image (thus making use of the sprite) for the globe.

.pinkHover #globe {
    background-position:left -300px;
}
.greenHover #globe {
    background-position:left -600px;
}
.grayHover #globe {
    background-position:left -900px;
}

and gives the menu items lower opacity while giving the current item full opacity.

.hover #menu a {
    opacity:.2;
}
.grayHover #menu a.gray {
    opacity:1;
}
.pinkHover #menu a.pink {
    opacity:1;
}
.greenHover #menu a.green {
    opacity:1;
}

Note: you shouldn't put a div inside an anchor (a) tag because you can't put a block element inside an inline element. It might be ok in HTML5 but why risk it. Is putting a div inside an anchor ever correct?

I think I might've confused whether you want things opaque/transparent, but the concept is the same — Talya S, Sep 23 '15 at 12:47

How do I make a hover element change the state of 3 other elements?

2 Answers2