如何使用 CSS class/id 更改其他类属性？ [关闭]答案

【问题标题】：How to use CSS class/id to change other classes attributes? [closed]如何使用 CSS class/id 更改其他类属性？ [关闭]
【发布时间】：2013-12-11 14:47:25
【问题描述】：

所以我想：悬停在一个元素上，我希望悬停改变另一个类的属性。我该怎么做？我想将鼠标悬停在一个按钮上，并将其他 div 的显示更改为 display: block。我只使用 HTML 和 CSS。

【问题讨论】：

你的 HTML 是什么样的？你试过什么 CSS？
我没有尝试过任何东西，因为我不知道如何更改另一个类中的另一个类属性。编辑：澄清一下，我什至不知道该尝试什么。
到目前为止，如果没有您尝试使用的代码示例（即使只是标记也是一个好的开始），您不太可能找到太多帮助。但是，您知道，您不太可能获得所需的内容，因为您不应该在按钮对象中嵌套 div，因此您将无法在 CSS 中使用父子关系来触发一个开关。您很可能需要使用一些 Javascript 来实现这一点。

标签： css class html hover

【解决方案1】：

不使用JS，你可以改变悬停元素的子节点。例如，如果您有：

<div class="container">
    <div class="box">Content</div>
</div>

您可以使用以下代码更改 .box 属性：

.container:hover .box

【讨论】：

这是我一直在寻找的，但它不起作用。我现在用 javascript 试试。
查看@wouthoekstra 使用选择器定位其他元素的答案
是否可以引用多个类？

【解决方案2】：

你受到 css 的限制，但 css 选择器有可能。我已经让你成为一个可能的解决方案的 jsfiddle：

http://jsfiddle.net/6rT3Q/

CSS：

.item1:hover ~ .item3 {
    background-color: red;
}

HTML

<div class="item1">
    Hoverable item
</div>

<div class="item2">
    Dummy item
</div>

<div class="item3">
    Item to change
</div>

这里的~ 告诉寻找后续元素。如果你想要下一个元素，你可以使用+。

【讨论】：

.li:hover ~ .crs { display: block;它仍然不起作用..crs { position: absolute;左边距：170px；显示：无；背景颜色：#0080C0；白颜色;边框半径：5px；文本对齐：居中；宽度：100px； }
你能告诉我你的 html 是什么样的吗？因为使用~，您受限于可以放置要更改的项目的位置。
Etusivu

1. kurssi

Biologia

Maantieto
历史

Yhteiskuntaoppi

Uskonto

Terveystieto

Filosofia

心理学
crs (course) 类是隐藏的，当鼠标悬停在 li 上时应该显示一个块
据我所知，我认为您不了解如何使用列表。也许您可以阅读以下内容：HTML Lists 或遵循列表上的教程Tutorial on unordered lists。

【解决方案3】：

您可以为此使用javascript。将您的按钮放在一个 div 中并使用以下内容：

document.getElementById("buttonDiv").onmouseover = function() {
    document.getElementById["divToHide"].style.display = "block";
};

【讨论】：

【解决方案4】：

为此，您将使用 Javascript。例如使用 jQuery，你可以这样做：

$( "#hoveredElement" ).mouseover(function() {
   $( "#otherDiv" ).css("display", "block"); //or just use .show() if it is
                                             //initially hidden
});

【讨论】：