悬停效应在儿童div中未显示

Question

我在我的解决方案页面中有四个类别，石油和天然气，公用事业，智能建筑，工业工程。

我已经在每个类别上放置了一个悬停效果，有一个主要的div叫做pic_categry(而悬停，背景颜色变化)。我还在pic_categry的儿童div中放置了一个叫做pic_catgry_img1的悬停效应。我的问题是当我悬停父div(pic_categry)时，pic_catgry_img1的悬停效果不起作用，它的工作只停留在那个div上。如何在悬停父div (pic_categry)时显示两种悬停效果。

HTML:

<div id="wrapper4"> <a href="oil_n_gas.php">
            <div class="pic_categry">
              <div class="pic_catgry_img1"></div>
              <div class="pic_catgry_title">Oil N Gas</div>
            </div>
            </a>  <a href="smart_meter.php">
            <div class="pic_categry">
              <div class="pic_catgry_img3"></div>
              <div class="pic_catgry_title">Utilities</div>
            </div>
            </a>  <a href="inteligent.php">
            <div class="pic_categry">
              <div class="pic_catgry_img2"></div>
              <div class="pic_catgry_title">Intelligent Building</div>
            </div>
            </a>  <a href="industrial_engineering.php">
            <div class="pic_categry  align_tab">
              <div class="pic_catgry_img4"></div>
              <div class="pic_catgry_title">Industrial Engineering </div>
            </div>
            </a> 
</div>

CSS:

.pic_categry {
    width: 233px;
    height: 239px;
    float: left;
    text-align: center;
    color: #425B97;
    margin-bottom: 20px;
    padding-top: 10px;
    padding-right: 3px;
    padding-bottom: 5px;
    padding-left: 3px;
    margin-right:23px;
}
.pic_categry:hover {
    background-color:#e8e8e8;
    border-radius:4px;
    color:#263a87 !important;
}
.pic_catgry_title {
    font-family:'Varela', sans-serif;
    font-size:20px;
    text-align:center;
    padding-bottom: 10px;
}
.pic_catgry_title:hover {
    color:#263a87;
    text-decoration:none !important;
}
.pic_catgry_img1 {
    width: 157px;
    height: 128px;
    margin: 0px auto;
    background-image: url(../images/new/ind_oil.png);
    background-repeat: no-repeat;
    background-position: left top;
}
.pic_catgry_img1:hover {
    background-image: url(../images/new/ind_oil.png);
    background-repeat: no-repeat;
    background-position: left bottom;
}
.pic_catgry_img2 {
    width: 157px;
    height: 128px;
    margin: 0px auto;
    background-image: url(../images/new/ind_smart.png);
    background-repeat: no-repeat;
    background-position: left top;
}
.pic_catgry_img2:hover {
    background-image: url(../images/new/ind_smart.png);
    background-repeat: no-repeat;
    background-position: left bottom;
}
.pic_catgry_img3 {
    width: 157px;
    height: 128px;
    margin: 0px auto;
    background-image:url(../images/new/ind_utlts.png);
    background-repeat: no-repeat;
    background-position: left top;
}
.pic_catgry_img3:hover {
    background-image: url(../images/new/ind_utlts.png);
    background-repeat: no-repeat;
    background-position: left bottom;
}
.pic_catgry_img4 {
    width: 157px;
    height: 128px;
    margin: 0px auto;
    background-image:url(../images/new/ind_heavy.png);
    background-repeat: no-repeat;
    background-position: left top;
}
.pic_catgry_img4:hover {
    background-image: url(../images/new/ind_heavy.png);
    background-repeat: no-repeat;
    background-position: left bottom;
}

Answer 1

只需像这样修改代码：

.pic_catgry_img1:hover{
    background-image: url(../images/new/ind_oil.png);
    background-repeat: no-repeat;
    background-position: left bottom;
}

至

.pic_categry:hover .pic_catgry_img1{
    background-image: url(../images/new/ind_oil.png);
    background-repeat: no-repeat;
    background-position: left bottom;
}

因此，当鼠标进入父div时，可以在子div上应用悬停效果更改。

Answer 2

更改背景颜色并使用所需的图像

.pic_categry > .pic_catgry_img1:hover{background-color:#FF0000;}

Answer 3

试一试

.pic_categry:hover .pic_catgry_img1{
    background-position: left bottom;  //only need this
}

来自@Atrem Fitiskin的评论

只更改相关属性(在本例中，只更改背景位置)。