如何使悬停元素更改其他 3 个元素的状态？

Question

This is my closest answer I can find 但我正在努力通过我必须做的图形/导航来实现这一点。希望你能帮忙。

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

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

同时

菜单区域上的不透明内容在地球上将是不透明的。

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

我希望这是有道理的。

我曾考虑使用z-index 将地球的 3 个部分分层，但我认为这行不通？

还附上了地球的图片。

希望你能帮忙！

史蒂夫

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