面板组悬停更改 Img 到另一个

Question

我开始使用 Bootstrap，但我遇到了问题。
我有一个面板组，在这个面板中有一个图像和一个文本。
问题来了，我想将每个 hover 的 image 更改为另一个 image。
但是当鼠标进入面板而不是图像时，它需要更改。当我的鼠标进入图像时，我发现很多东西可以改变图像，但不是面板。

我的代码：

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

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

你不知道我想问什么：）。 希望有人可以在这里帮助我。

问候

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>

希望对你有帮助！