Question

我有一个父div和多个子div。我想要它，这样如果你将鼠标悬停在父div上，它会以不同的方式影响所有子div的悬停状态（即一个div的文本加下划线，另一个div的文本改变颜色，而保存图像的div使得图像有点轻 - 仅举例）。你怎么能实现这个呢？

以下是我目前正在使用的代码：

<div id='main_categories_item'> 
    <div id='main_categories_item_image'>
    <img src='http://www.ultimate-punch.com/images/small_icon/ironman.jpg'>
    </div>

    <div id='main_categories_item_text_container'>
        <div id='main_categories_item_category'>culture review</div>
        <div id='main_categories_item_short_subtitle'>Our critique of the latest Iron Man installment</div>
        <div id='main_categories_item_date'>2nd April 2013</div>
    </div>
</div>

在此，我希望#main_categories_item_category改变下划线，＃main_categories_item_short_subtitle改变颜色，＃main_categories_item_image改变不透明度。

这是我到目前为止的CSS：

#main_categories_item {
    height: 100%;
    width: 100%;
    background-color: #f4f4f4;
    border-bottom: 1px solid #fff;
    padding: 10px;
    overflow:auto; 
}
#main_categories_item_image {
    float: left;
    margin-right: 10px;
}
#main_categories_item_image img {
    width: 64px;
    height: 64px;
}
#main_categories_item_text_container{
    float: right;
    width: 146px;
    height: 64px;
}
#main_categories_item_category {
    font-family: Trebuchet MS;
    font-size: 14px;
    text-transform: uppercase;
    color: #991111;
    height:17px;
}
#main_categories_item_short_subtitle {
    font-family: Trebuchet MS;
    font-size: 12px;
    color: #171717;
    height: 36px;
}
#main_categories_item_date {
    font-family: Trebuchet MS;
    font-size: 10px;
    color: #575757;
}

谢谢！

Answer 1

#main_categories_item_text_container:hover
#main_categories_item_category {
    text-decoration : underline;
}

#main_categories_item_text_container:hover
#main_categories_item_short_subtitle {
    color : blue;
}

#main_categories_item_text_container:hover
#main_categories_item_image {
    opacity : 0.5;
}

那应该有用

Answer 2

你可以这样做：

#parent:hover .child:hover {
    color:red;
}

当悬停#parent时，这会使.child变为红色。

Answer 3

不是按类影响孩子，而是按类型影响孩子：

.parentClass div {
    height: 100%;
}

此代码会影响班级div中的所有parent。使用此概念，您将需要某种类型的变量来区分三个div。例如，如果您有div A - div C并且只有div B中有图片，则运行以下代码显然只会影响div B中的图片。

.parentClass div img {
    /* make lighter */
}

我认为你应该能够至少抛出一个id来区分，即使这些div是动态创建的，无论是客户端还是服务器端。如果是这种情况，这是更糟糕的情况，仍然有动态分配id的方法。如果您分配了id，则以下代码可以使用

.parentClass #div1 {
    height: 10px;
}
.parentClass #div2 {
    height: 20px;
}
.parentClass #div2 img {
    /* make lighter */
}
.parentClass #div3 {
    height: 30px;
}

<div id="div2">
    <img src="images/example.png"/>
</div>

希望有所帮助：）

CSS：悬停以影响所有子div

3 个答案: