Question

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

我对每个类别都设置了一个悬停效果，有一个主要的div 调用pic_categry（悬停背景颜色变化时）。我有＆＃39; 还会在名为pic_categry的{{1}}子div中设置悬停效果。我的问题是当我将父div（pic_catgry_img1）悬停在悬停效果上时 pic_categry无法正常工作，只能将div悬停。如何在悬停父div（pic_catgry_img1）时显示悬停效果。

HTML：

pic_categry

CSS：

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

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的评论

仅更改依赖属性（仅在此情况下）背景位置）。

悬浮效果未显示在子div中

3 个答案: