My code is supposed to hide element `a` and display element `b` on mouse over, the only problem is that it is blinking the element on mouse over.
I checked the whole code and for me it is perfectly fine, I don't know what I'm missing here.

HTML

```
  <div class="parent">
    <div class="el-a">
    <a href="#" onMouseOver="clicksound.playclip()">1</a>
    </div>
    <div class="el-b">
    <a href="#">2</a>
    </div>

    </div>

```

CSS:

```
/* LOGO SUPERIOR */
.el-a {

     width:352px;
     height:115px}
.el-b {

     opacity: 0;
      width:352px;
     height:115px;
}

```

Javascript

```
$(document).ready(function() {
    $(".el-b").hide();
    $(".el-a").on("mouseover", function() {
       $(".el-b").show();
       $(this).hide();
    }).on("mouseout", function() {
        $(".el-b").hide();
        $(this).show();
    });
});

```

<http://jsfiddle.net/huy6yvdu/4/>

EDITED as @showdev suggested, but now the second element appears on page until the script is loaded:
[![enter image description here](https://i.stack.imgur.com/UYV61.jpg)](https://i.stack.imgur.com/UYV61.jpg)

You can check it here, at the logo positions, it appears for a few seconds before the script is loaded: <http://lucrebem.com.br/blog/emponline/92-ferramentas-seo>