<div class="css-toggle">CSS ile Gizle/Göster
  <span>Bu eleman <b>.css-toogle</b>'ın içerisinde olması gerek</span>
</div>

<div class="js-toggle">jQuery ile Gizle/Göster
  <span>Bu elemanın nerede olduğunun önemi yok.</span>
</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400&subset=latin,latin-ext);

.css-toggle{
  float:left;
  color:white;
  font:400 15px'Open Sans';
  background-color:tomato;
  width:48%;
  padding:1%;
  text-align:center;
  display:inline-block;
}

.js-toggle{
  float:left;
  color:white;
  font:400 15px'Open Sans';
  background-color:CornflowerBlue;
  width:48%;
  padding:1%;
  text-align:center;
  display:inline-block;
}

.css-toggle:hover span{display:block;}

.css-toggle span, .js-toggle span{
  display:none;
  font-size:13px;
  padding-top:30px;
  color:#111;
}
  $(".js-toggle, .js-toggle span").on("mouseenter", function() {
  $(".js-toggle span").css( "display", "block" );
  }).on("mouseleave", function() {
  $(".js-toggle span").css( "display", "none" );
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js