title: Javascript - View adobe file in HTML (mouse over)
body: <p>I have a list of file which contain <strong>.psd, .ai, .eps,.pdf</strong> in html. I would like to <strong>view the file when mouse over the filename</strong>. Is it possible to that? </p>
  
  <p>Below snippet is example. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box{
      display: none;
      width: 100%;
  }
  
  a:hover + .box,.box:hover{
      display: block;
      position: relative;
      z-index: 100;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>This live preview for &lt;a href="http://en.wikipedia.org/"&gt;Wikipedia&lt;/a&gt;&lt;div class="box"&gt;&lt;iframe src="http://en.wikipedia.org/" width = "500px" height = "500px"&gt;&lt;/iframe&gt;&lt;/div&gt; remains open on mouseover.</code></pre>
  </div>
  </div>
  </p>