当我使用show（）和hide（）时，为什么我的<img/>会调整大小？

Question

这可能不是实现语言切换器的最明智的方法。

但我想出了这个：

＆＃13;

＆＃13;

$(document).ready(function(){
  $('.lang-switch').hover(
    function() {
      $('.lang-inactive').hide();
      $('.lang-active').show();
    }, function() {
      $('.lang-active').hide();
      $('.lang-inactive').show();
    }
  );
});

＆＃13;

#lang {
  text-align: center;
  line-height: 18px;
  padding: 20px 0 15px 0;
}

#lang ul {
  text-align: center;
  padding: 0;
  margin: 0 auto;
}

#lang li {
  display: inline;
  list-style-type: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="lang">
  <ul>
    <li>
      <img src="images/lang_DE_active.png"
           alt="Deutsch"
           style="width:30px; height:18px"/>
    </li>
    <li class="lang-switch">
      <a href="EN_What.html">
        <img class="lang-inactive"
             src="images/lang_EN_inactive.png"
             alt="English"
             style="width:30px; height:18px"/>
        <img class="lang-active"
             style="display:none"
             src="images/lang_EN_active.png"
             alt="English"
             style="width:30px; height:18px"/>
      </a>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

然后会发生什么（点击查看gif）：

The lang_EN_active.png resizes to its original PNG-size (100x60) while hovering.

为什么会这样？我能预防吗？或者我应该为语言切换器使用完全不同的方式（例如在CSS中声明悬停）？

Answer 1

嗨，我已经检查了你的代码，我发现一些css会覆盖你的图像风格。这么简单的方法是使用!important 我还注意到style代码中有两个image属性。

以下是代码：

$(document).ready(function(){
  $('.lang-switch').hover(
    function() {
      $('.lang-inactive').hide();
      $('.lang-active').show();
    }, function() {
      $('.lang-active').hide();
      $('.lang-inactive').show();
    }
  );
});

#lang {
  text-align: center;
  line-height: 18px;
  padding: 20px 0 15px 0;
}

#lang ul {
  text-align: center;
  padding: 0;
  margin: 0 auto;
}

#lang li {
  display: inline;
  list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="lang">
  <ul>
    <li>
      <img src="images/lang_DE_active.png"
           alt="Deutsch"
           style="width:30px; height:18px"/>
    </li>
    <li class="lang-switch">
      <a href="EN_What.html">
        <img class="lang-inactive"
             src="images/lang_EN_inactive.png"
             alt="English"
             style="width:30px; height:18px"/>
        <img class="lang-active"
             src="images/lang_EN_active.png"
             alt="English"
             style="width:30px; height:18px; display:none"/>
      </a>
    </li>
  </ul>
</div>