Question

我开始使用Bootstrap，但我遇到了问题我有 Panel-Group ，在此面板中有图片和文字。
问题是我想将图片按悬停更改为另一个图片。
但是当鼠标进入面板而不是图像时，它需要改变。当我的鼠标进入图像时，我发现很多东西要改变图像，而不是面板。

我的代码：

＆＃13;

.panel-body {
  background-color: RGB(203, 207, 208);
}

.panel-body p {
  margin-right: 20px;
}

.panel-body:hover {
  background-color: #6AA9DD;
  color: white;
}

.panel {
  min-width: 350px;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="col-xs-12 col-sm-6 col-lg-4">
  <a href="Dokumente/Vorlage/Template_Voiteq-SMILOG.dotm" downlaod="Template_Voiteq-SMILOG.dotm">
    <div class="panel-group">
      <div class="panel panel-primary">
        <div class="panel-body">
          <table>
            <tr>
              <td><img id="defaultImg" src="img/folder.png" alt="folder" /><img id="HoverImg" src="img/folderHover.png" class="hide" alt="folder" /></td>
              <td>
                <p>Technische Dokumentation Formatvorlage Voiteq-SMILOG</p>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </a>
</div>

＆＃13;

你不知道我想问什么，请:)。希望有人可以帮助我。

此致

Answer 1

默认情况下设置#HoverImg display:none，然后在面板上将display:block设置为#HoverImg，将display:none设置为#defaultImg。

尝试使用.panel:hover img。

.panel-body {
  background-color: RGB(203, 207, 208);
}

.panel-body p {
  margin-right: 20px;
}

.panel-body:hover {
  background-color: #6AA9DD;
  color: white;
}

.panel {
  min-width: 350px;
}

#HoverImg {
  display: none;
}

.panel:hover #defaultImg {
  display: none;
}

.panel:hover #HoverImg {
  display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="col-xs-12 col-sm-6 col-lg-4">
  <a href="Dokumente/Vorlage/Template_Voiteq-SMILOG.dotm" downlaod="Template_Voiteq-SMILOG.dotm">
    <div class="panel-group">
      <div class="panel panel-primary">
        <div class="panel-body">
          <table>
            <tr>
              <td><img id="defaultImg" src="http://lorempixel.com/100/100/sports" alt="folder" /><img id="HoverImg" src="http://lorempixel.com/100/100/food" class="hide" alt="folder" /></td>
              <td>
                <p>Technische Dokumentation Formatvorlage Voiteq-SMILOG</p>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </a>
</div>

我希望这会对你有所帮助！

Panel-Group Hover将Img更改为另一个

1 个答案: