jquery - 为什么当我使用 show() 和 hide() 时我的 会调整大小？

Question

也许这不是实现语言切换器的最聪明的方法。

但是我想到了这个:

$(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"
             style="display:none"
             src="images/lang_EN_active.png"
             alt="English"
             style="width:30px; height:18px"/>
      </a>
    </li>
  </ul>
</div>

然后会发生什么(点击查看 gif):

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

为什么会这样？我可以阻止它吗？或者我应该为语言切换器使用完全不同的方式(例如，在 CSS 中声明悬停)？

Answer 1

您好，我已经检查了您的代码，我发现某些 CSS 覆盖了您的图像样式。如此简单的方法就是使用 !important我还注意到您的 image 标签中有两个 style 属性。

代码如下:

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