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

Question

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

你可以在这里看到我的 fiddle :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 background-image 代替 Sprite )，你必须创建你的拥有自己图像的坐标。这是我创建的 Sprite :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');    
});

这会更改地球背景图像的位置(从而使用 sprite)。

.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 放在 anchor (a) 标记内，因为您不能将 block 元素放在内联元素内。在 HTML5 中可能没问题，但为什么要冒险呢。 Is putting a div inside an anchor ever correct?