如何在悬停在另一个 div 上时更改一个 div 的外观？答案

【问题标题】：how do I change the appearance of one div while hovering over another?如何在悬停在另一个 div 上时更改一个 div 的外观？
【发布时间】：2013-03-29 05:45:38
【问题描述】：

首先，我使用的是 DW 的流式布局格式。我的布局中有多个容器，我正在寻找的是当您将鼠标悬停在图稿按钮 1 上时，图稿 1 和按钮 1 的不透明度都会改变，然后更改为图稿 12 和按钮 12。反之亦然。我已经尝试过使用一些 javascript - 特别是这个：jsfiddle

我想知道这是否与我的 div 没有相互连接有关。但是，如果您查看我提供的图像，我想要影响的是在主 .gridContainer 下。黑盒子已经分配了 dv id，并且属于按钮 div - 这是正确的做事方式，因为我对这一切都很陌生。

</head>
<body>
<div class="gridContainer clearfix">
<div id="buttons">
<div id="button1">
<div id="artwork">
<div id="artwork1">

我会提供更多信息，但我希望尽可能简单。作为对所有这一切都非常陌生，我不想让这更加混乱。我认为我的问题在于尝试将 div id 分配给另一个 div 内的元素，但我真的不确定。需要一些聪明人的认真帮助！谢谢。我的声誉还不够高，无法发布图片来展示我正在尝试做的事情。

【问题讨论】：

到底是什么问题？我看到小提琴按照您指定的方式工作是必需的
看起来像它的工作
我想到的唯一想法是使用+ 选择器。
看看这个jsbin。我假设 div 是兄弟姐妹，所以我只使用 CSS 来做你需要的事情。 If you want to know more about the ~ (General sibling combinator) selector.
这就是我想要的效果。但我担心的是 div 不是兄弟姐妹。这可能是我的问题所在。本质上，我有一个主要的 div（gridcontainer），12 个按钮和 12 个艺术品位于它们各自的 div（按钮和艺术品）内 - 本质上它们只是分配了 id 的图像，而按钮和艺术品 div 位于 gridcontainer 内。

标签： jquery css html hover fluid-layout

【解决方案1】：

看看 jQuery fadeTo、hover 和 not

我不知道这是否是您想要的确切效果，但它应该会给您一些想法。
http://jsfiddle.net/gU4sw/655/

$('.item,.region').hover(
//Hover In
function () {
$('.item,.region').not(this).not($("#" + $(this).attr('id') + 'match')).fadeTo("fast",.5);
}, 
//Hover out
function () {
$('.item,.region').fadeTo("fast", 1);
});

【讨论】：