Question

我新来到CSS3 / HTML5的世界，我想做点什么，但我不知道该怎么做。我想用另一个元素控制一个元素，例如，当.A悬停时，.B变为蓝色。有没有办法做到这一点？

谢谢！

Answer 1

您可以使用CSS选择器执行此操作。如果B是A的孩子，那很简单：你可以做到 #A:hover > #B { ... }

否则，您可以使用其他特定选择器，例如~和+。

看看这里：http://css-tricks.com/child-and-sibling-selectors/

Answer 2

<div class='a'></div>
<div class='b'></div>

<style>
    .a {
        height: 100px;
        width: 100px;
        background: blue;
    }

    .b {
        height: 100px;
        width: 100px;
        background: green;
    }

    .a:hover + .b {
        background: red;
    }
</style>

http://jsfiddle.net/vgoLx7z0/

这是一个小提琴，虽然我建议使用jQuery

Answer 3

是的，有......但有一些条件。

你有几个css相对选择器，但它们只针对以下sibilings和children。

一些例子：

.a:hover + .b - 选择.b元素，它立即跟随悬停的.a作为兄弟姐妹。
.a:hover ~ .b - 选择跟随.b作为兄弟姐妹的任何距离的.a元素。
.a:hover > .b - 选择.b元素作为悬停.a的直接子元素。
.a:hover .b - 在悬停的.b的任何嵌套级别选择子级的.a元素。

还有许多其他关系选择器，你可以找到更多：http://www.w3.org/TR/selectors/

请注意，没有父选择器，也没有以前的同级选择器......只有关注者

对于更多种类的选择，您必须查看Javascript操作，以便以任何方式浏览元素！

Answer 4

有办法做到这一点吗？是的，但是有很多限制。

首先，您需要定义“动作”，这是使用CSS pseudo-classes完成的。伪类（和一般的CSS）并不是真正面向行动的。实际上，唯一真正的操作是:hover伪类（以及:focus，当您将键入光标放在表单字段中时会触发它。）

接下来，您需要定义目标元素。为此，您需要使用child and sibling selectors。其中有一些，但它们都非常具体，而且不够灵活。他们会做一些事情，比如“选择第一个段落标签，它是div标签的直接子节点，具有特定的id”。例如，如果您有以下HTML：

<ul id="menu">
    <li><a href="">Link</a>
        <ul style="display:none">
            <li><a href="">Sub-menu item</a></li>
        </ul>
    <li>
</ul>

当您将鼠标悬停在其父级上时，可以使用以下CSS使子导航可见：

#menu li:hover > ul {
    display:block;
}

此示例查找ul元素，该元素是正在悬停的li元素的直接子元素。请参阅我上面发布的链接，以深入探索兄弟和儿童选择器。

当您需要执行更复杂或更灵活的操作时（例如，基于点击而不是悬停来更改元素），您将需要使用JavaScript或jQuery或类似的脚本解决方案。

Answer 5

您正在寻找:hover伪选择器。

：hover伪类适用于用户指定元素的情况使用指点设备，但不一定要激活它。

W3 Definition
您可以使用：hover like：

.a:hover .b{
background:red;
}

这会在类.b的元素中选择类.a的元素，如下所示：

 <div class="a">
    Hover over me!
    <div class="b">
    I will turn red when you hover over my parent.
    </div>
</div>

您也可以选择直接兄弟姐妹：

.a:hover + .b{
    background:red;
    }

 <div class="a">
    Hover over me!
 </div>
 <div class="b">
 I will turn red when you hover over .a.
 </div>

或间接兄弟姐妹：

.a:hover ~ .b button{
        background:red;
        }



      <div class="a">
            Hover over me!
         </div>
         <div class="b">
         <button>
         I will turn red when you hover over .a.
         </button>
         </div>

但是，你不能在悬停元素之上选择父母或兄弟姐妹 JSFiddle Demo of CSS selection
另一种选择是使用JavaScript onmouseover＆amp;的onmouseout：

<div id="parent" >Lorem ipsum dolor...<h1>
    <div id="b" onmouseover="document.getElementById('parent').style.backgroundColor='red';" onmouseout="document.getElementById('parent').style.backgroundColor='white';">Hover over me and change my parent!</div></h1>
</div>

JSFiddle Demo
你也可以使用JQuery hover（），但这个小操作真的不需要。

CSS用其他东西控制事物

5 个答案: