如何使悬停元素改变其他三个元素的状态？

Question

This is my closest answer I can find，但是我很难用图形/导航来实现这一点。希望你能帮上忙。

你可以在这里看到我的小提琴：https://jsfiddle.net/SteveDavies/nxcw9w4f/

我有两个部分，右边的部分是3个菜单项。当我悬停在灰色，我希望绿色和粉红色改变(不透明)。当我在绿色上空盘旋时，我希望灰色和粉红色发生变化，当我在粉红色上空盘旋时，我希望绿色和灰色发生变化。

​

​

同时

任何在菜单区域是不透明的将是不透明的在全球。

然后我需要让它倒转，当我漂浮在全球的粉红色区域时，另外两个区域是灰色的，在菜单区域也是灰色的。

我希望这是合理的。

我考虑过使用z-index来对地球的三个部分进行分层，但我不认为这会起作用。

地球的图像也附呈。

希望你能帮忙！

史蒂夫

Answer 1

我创造了一些东西：https://jsfiddle.net/nxcw9w4f/2/

恐怕这有点复杂，你可能需要学习一些新的技能和概念来重新创建它，但我没有看到更简单的方法来实现这一点，也许其他人会这样做。我使用一个图像映射来识别复杂形状上的悬停(图像地图中的实际图像是一个透明的GIF https://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/，因为我们需要使用CSS背景图像而不是雪碧)，您必须用自己图像的坐标创建自己的图像。这是我创建的雪碧：http://s9.postimg.org/lpcnlmp7j/circlesprite.gif

使用jQuery (https://api.jquery.com/hover/)，我根据悬停的元素更改了容器的类。这既适用于菜单项，也适用于全球项目，因为它们具有相同的类(灰色、粉红色或绿色)。

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

这会改变地球背景图像的位置(从而利用雪碧)。

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

并在给予当前项完全不透明度的同时，给出较低的不透明度。

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

注意:您不应该将div放在锚(a)标记中，因为不能在内联元素中放置块元素。这在HTML5可能是可以的，但为什么要冒这个险呢？Is putting a div inside an anchor ever correct?

Answer 2

我为你做了一个简单的演示。这就是你要找的吗

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');
  });
});