当鼠标悬停在其他div元素上方时，更改一个div元素的属性

Question

很抱歉再次提起这件事，因为我很确定它已经在here之类的线程中得到了解答，但在较旧的帖子中发帖似乎毫无意义。但我想知道我是否仍然需要jQuery（或类似的东西）以便在悬停在其他div元素之上时更改一个div元素的属性？

如果答案仍然是肯定的，请查看以下图片：

这是我的导航的一部分，我现在正试图将其变为现实。如您所见，按钮下面有某种镜像效果。我希望这些按钮可以在进行“悬停”背景位置/背景图像更改时进行点击。我尝试用一​​个div元素来做到这一点，因为按钮区域本身比整个图形小，所以即使当我在反射上方悬停时按钮已准备好使用，这不是很直观

目前我正在使用div元素来显示包含悬停效果的背景图片 - 抱歉但我真的不知道如何描述以下内容 - 某种“隐形”文本链接被强制为特定大小以模拟可点击区域。这是一个小的可视化：

绿色是背景图像的区域，在div元素上方悬停时会发生变化，红色区域是“按钮”。

所以再一个问题......我还需要像jQuery这样的东西，只有当我将鼠标悬停在按钮区域上方时才能使这个悬停效果有效，是否有不同的方法或... ...就像jQuery真的是唯一的答案那个？

Answer 1

我有一个在Firefox 3.6中运行的快速解决方案，你可以try it at jsFiddle。

这不是您问题的答案，而是为您的设计提供解决方案。

HTML：

<div id="container">
    <a href="target1.html" id="button1">
        <div id="reflection1-active"></div>    
    </a>
    <div id="reflection1-inactive"></div>
</div>

CSS：

#container{
    position: relative;   
}
#button1{
    background-color: #900;
    height: 32px;
    width: 80px;
    display: block;   
    position: absolute;
    z-index: 10;
}
#button1:hover{
    background-color: #F00;
}
#button1 #reflection1-active{
    position: absolute;
    background-color: #f77;   
    height: 32px;
    width: 80px;
    display: block;
    top: 32px;
    display: none;
}
#button1:hover #reflection1-active{
    display: block;
}
#button1 #reflection1-active:hover{
    display: none;   
}
#reflection1-inactive{
    background-color: #977;
    height: 32px;
    width: 80px;
    top: 32px;
    display: block;
    position: absolute;
    z-index: 0;
}

Answer 2

当你将鼠标悬停在另一个元素（父div）中的元素（链接/按钮）上时，你实际上仍然在父元素上盘旋，这样你就可以同时影响其中两个元素：

HTML： <div><a href="#">the button</a></div>

CSS：

div {width: 100px; height: 200px; background: green;}
a {display: block; height: 100px; background: #000;}

div:hover {background: #cfc;}
a:hover {background: #eee;}

如果我理解正确的问题，无论你是否在“按钮区域”（div:hover），背景（绿色到浅绿色）都会改变，而按钮区域只会在你改变时改变因为它只受a:hover

的影响，所以按下按钮本身

[更新]

实际上我认为我误解了这个问题：你只想在悬停<a>（按钮）时更改div的背景图片？

将新的完整背景放在<a>上并让它更改它的高度也意味着更大的“按钮”区域，但这只会在按钮实际上悬停在

上时

尝试使用此CSS：

div {width: 100px; height: 200px; background: green;}
a {display: block; height: 100px; background: #eee;}

a:hover {background: #000; height: 200px;}

Answer 3

我不知道是否有任何浏览器支持这个，而且我从未尝试过，但是......你可以使用一个选择器作为与悬停元素相邻的兄弟，然后使用相邻的元素来渲染阴影吗？由于相邻元素不是hoverable元素的子元素，因此将鼠标悬停在该元素上不会触发悬停选择匹配。