1

当悬停在一个特定的 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，文本可见性也不起作用。

任何帮助，将不胜感激。

4

1 回答 1

1

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

小提琴

标记：

<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;}
于 2013-11-03T21:31:10.623 回答