Why does my <img> size change when I use show () and hide ()?

Question

This may not be the smartest way to implement a language switch.

But I came up with this:

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

Run code

What happens then is (click to see gif):

lang_EN_active.png resizes to the original PNG size (100x60) during hovering.

Why is this happening? Can I prevent this? Or should I use a completely different way for the language switch (e.g. declare hover in 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>