Question

当我将鼠标悬停在一个特定的div类上时，我试图影响各种div类。

CSS

.left {float:left;}
.middle {float:left;}
.right {float:right;}

.left, .middle, .right {width:33%; 
    height:40px; background-color:transparent;}

.middle:hover {background-color:red;}

.middle:hover ~ .right {background-color: green;}

.text {display:none;}

HTML

<div id="container">
    <div class="left">
    </div>
    <div class="middle">
        <a href="#">linked text</a>
    </div>
    <div class="right">
        <span class="text">Here we have some text</span>
    </div>
</div>

当鼠标悬停在中间div类上时，左，中，右div类都必须得到不同的背景颜色。

除此之外，右边的div也有文字。此文本需要隐藏，并且只应在中间的div悬停时显示。

所以，回顾一下..

在页面加载时，左，中，右div应该具有透明背景，而右边的div不应该有任何文本。当悬停在中间div时，3个div都获得不同的背景颜色，右侧div中的文本应该变得可见。

我试图用伪选择器做这个，但我只能改变中间和右边div的背景颜色。我无法影响左侧div，文字可见性也不起作用。

任何帮助都将不胜感激。

Answer 1

只有更改标记以使.middle类成为容器的第一个子项时，才能执行此操作。这是因为css中没有父选择器（尚未）。注意：即使它是标记中的第一个孩子，我们仍然可以通过浮动（或定位）其他2个元素将其置于中间位置：

<强> FIDDLE

标记：

<div id="container">
     <div class="middle">
        <a href="#">linked text</a>
    </div>
    <div class="left">
    </div>

    <div class="right">
        <span class="text">Here we have some text</span>
    </div>
</div>

CSS

.container
{
    text-align: center;
}
.left {float:left;}
.middle { display: inline-block; }
.right {float:right;}

.left, .middle, .right 
{
    width:33%; 
    height:40px; 
    background-color:transparent;
}

.middle:hover {background-color:red;}

.middle:hover ~ div {
    background-color: green;
}

.middle:hover ~ .right .text {
    display: block;
}

.text {display:none;}

将鼠标悬停在一个div类上时会影响各种div类

1 个答案:

标记：

CSS