6

我里面有一个父 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;
}

谢谢！

4

3 回答 3

6 
#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;
}

那应该工作

于 2013-05-02T21:55:39.707 回答
3

你可以这样做：

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

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

于 2013-05-02T21:56:12.473 回答
0

与其按类别影响孩子，不如按类型影响孩子：

.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>

希望有帮助:)

于 2013-12-12T18:24:40.180 回答