Question

如果有人问我之前，我真诚地道歉。经过大约半小时的搜索，我似乎无法找到一个“最佳答案”，而我遇到的大多数解决方案似乎都涉及JavaScript。虽然我并不完全反对JavaScript - 但HTML，CSS和PHP绝对是我更强大的技能组合。如果不使用JavaScript就无法做到这一点，我可能需要一些认真的宝贝谈话。这是我的问题：

我想将一个元素的背景图像更改为完全独立元素的悬停状态。以下是我希望如何工作的示例：

.some_element:hover {
    #some_unrelated_div {
         background-image: url('path/to/img.jpg');
    }
}

我希望这能传达出我理想解决方案的明确信息。谢谢你们。

Answer 1

CSS无法做到这一点。 CSS应该逐行读取并且非常快速，因此逻辑不应该在CSS中完成。

话虽如此，你可以这样做：

.some_element:hover #child_div {
  background-image: url('path/to/img.jpg');
}

Iff 您的HTML与此类似：

<div class="some_element">
  <div id="child_div">Hello</div>
</div>

这是有效的，因为选择器与属于#child_div ed :hover的{{1}}匹配。

如果您打算使用jQuery，这个框架代码将完成这项工作：

.some_element

Answer 2

这可以在纯CSS中完成，但前提是您希望更改背景图像的元素是您正在悬停的元素的子。例如：

#element1:hover #element2 {
    background-image: ...
}

如果它不是孩子，那么你需要JavaScript。

Answer 3

如果您希望将相同的样式应用于多个选择器，则必须使用逗号。如果您只用空格分隔它们，则意味着后者必须是前者的子元素才能匹配。听起来你要求的是：

.some_element:hover, #some_unrelated_div {
  background-image: url('path/to/img.jpg');
}

翻译为英语：所有元素都悬停在类“some_element”上，以及ID为“some_unrelated_div”的元素将具有背景图像路径/到/ img.jpg。

Answer 4

你需要使用Javascript / jQuery，因为它是由另一个元素上的悬停事件触发的事件（如菜单按钮等）。

CSS将为您设置元素的样式，您可以在jQuery中使用toggle()之类的东西来实现这一点，但您最终需要使用JS创建此功能。

Answer 5

.some_element:hover #some_unrelated_div {
         background-image: url('path/to/img.jpg');
    }

这是你想要的风格

Answer 6

您可以使用jQuery来实现您的愿望。在这里，当用户将鼠标悬停在该元素上时，将自动调用jQuery函数，之后您可以使用自己的代码来更改背景图像URL ....

如果您需要参考，请访问此链接here

Answer 7

据我所知，CSS不能做这种事情。如果 #some_unrelated_div是.some_element的远程孩子，可能有办法制作一个可怕的选择链。

你最好的选择是包括jQuery库（如此）：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

然后，在脚本标记或包含的文件中，编写以下jQuery：

[未经测试的初稿代码]

//this just waits for the DOM to finish loading $(function(){ //this selects .some_element and waits for the "hover" event $('.some_element').hover( // This is the function that executes when hover STARTS. function(){ // this selects #some_unrelated_div and edits its CSS (an object) $('#some_unrelated_div').css({ 'background-image' : "url('path/to/img.jpg')" }); }, // This is the function that executes when hover ENDS. function(){ $('#some_unrelated_div').css({ 'background-image' : [original style] }); } ); })

Answer 8

也许你也可以用CSS做到这一点。

但是，只有当你将div作为邻接时才有可能。

我让你成为JS-Fiddle：jsFiddle

关键部分是：

#hoveredDiv:hover ~ div > #target
{
    background-color: #f00;
}

以下是关于〜-Selector的w3c规范的链接：Click me

Answer 9

您将需要使用javascript或jQuery来实现此目的。

然而，只有使用css才能实现解决方法。那就是使用父子元素关系。

让我们假设div2在div1内所以你需要添加css作为

#div1:hover #div2 {background-color:#F00}

如果你不希望div2看起来像div1里面那么你可以添加位置：absulute。如下：

#div1 {position:relative; width:100px; height:100px}
#div2 {position:absolute; top:0; left:200px; height:100px}

但我总是喜欢用jQuery来做这件事。

用CSS改变多个元素？

9 个答案: