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

Question

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

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

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

同时

菜单区域不透明的部分在地球上也是不透明的。

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

我希望这是有道理的。

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

还附上了地球仪图片。

希望能帮到你！

史蒂夫

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/ 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

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

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

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

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

html

css

hover

css-selectors