Question

我正在使用引导程序。请指导我如何在悬停时为div赋予阴影效果。

.shadow-effects:hover {
  box-shadow: 5px 5px 5px gray;
}

<div class="col-md-4">
  <div class="col-md-12 bg_white shadow-effects" id="box">
    <div class="col-md-10 pd-left-right-0">
      <h4 class="box_title">One Click installation. Super easy to use</h4>
      <h5 class="text">Installation is prety easy,just click on "import demo" button and you are set. We've told you it's pretty easy</h5>
      <p class="box_bottom">DISCOVER MORE</p>
    </div>
    <div class="col-md-2 pd-left-right-0">
      <img src="images/cloud-computing-icon.png" class="img-responsive" alt="">
    </div>
  </div>
</div>

这不起作用

Answer 1

我只是从字面上复制粘贴了您的代码，一切似乎都正常！，请检查以下内容

.shadow-effects:hover{
    box-shadow: 5px 5px 5px gray;
}

<div class="col-md-4">
    <div class="col-md-12 bg_white shadow-effects" id="box">
        <div class="col-md-10 pd-left-right-0">
            <h4 class="box_title">One Click installation. Super easy to use</h4>
            <h5 class="text">Installation is prety easy,just click on "import demo" button and you are set. We've told you it's pretty easy</h5>
            <p class="box_bottom">DISCOVER MORE</p>
        </div>
        <div class="col-md-2 pd-left-right-0">
            <img src="images/cloud-computing-icon.png" class="img-responsive" alt="">
        </div>
    </div>
</div>

Answer 2

我认为还有其他问题。您提供的代码完全可以正常工作。也许您的ID重复或div被阻止或其他原因

Answer 3

编写此代码

.shadow-effects:hover{
    box-shadow: 5px 5px 5px gray;
}

进入

#box:hover{
    box-shadow: 5px 5px 5px gray;
}

希望有帮助

如何在悬停时给div阴影效果

3 个答案: