如何让悬停元素改变其他3个元素的状态？

Question

This is my closest answer I can find但我正在努力用我必须做的图形/导航来实现它。我希望你能提供帮助。

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

我有两个部分，右边的部分是3个菜单项。当我将鼠标悬停在灰色上时，我希望绿色和粉红色改变（不透明）。当我将鼠标悬停在果岭上时，我希望灰色和粉红色改变，当我将鼠标悬停在粉红色上时，我希望绿色和灰色能够改变。

同一时间

菜单区域的任何不透明在地球上都是不透明的。

然后我需要让它向后工作，当我漂浮在地球的粉红色区域时，其他两个区域变灰并且在菜单区域也变灰。

我希望这是有道理的。

我考虑过使用z-index对地球的三个部分进行分层，但我认为这不会有效吗？

地球的形象也附上了。

希望你能帮忙！

史蒂夫

Answer 1

我为你做了一个快速演示。这是你正在寻找的东西：

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

Answer 2

我创造了一些东西：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/）我根据您悬停的元素更改了容器的类。这适用于菜单项和globe项，因为它们具有相同的类（灰色，粉红色或绿色）。

$('.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?