Home/ Questions/Q 1069901
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T20:29:17+00:00

I have a large paragraph. Within that there is a span tag with id

  • 0

I have a large paragraph. Within that there is a span tag with id for a particular word. On mouse hover the size of that particular word in para should increase. It can come above the other text and cover the contents in paragraph but it should not affect the alignment of other text.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you don’t object to a pure CSS solution, with its somewhat imperfect cross-browser compatibility you can use :hover:after and content: attr(title); to achieve this:

    <!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

  <script type="text/javascript">

    $(document).ready(
      function() {

      }
      );

  </script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }

  p span.special {
    display: inline;
    position: relative;
    color: #f90;
  }
  p span.special:hover:after {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 3em;
    padding: 0.2em;
    border: 1px solid #ccc;
    background-color: #fff;
    content: attr(title);
  }
</style>
</head>
<body>

  <p>Est diam cras diam ultrices sagittis. Purus platea in nascetur nunc ac. In lacus massa. Sit pulvinar egestas amet magnis, nec! Ac pulvinar ac magna? Odio hac <span class="special" title="facilisis">facilisis</span>, in massa. Nascetur lacus lacus aliquet! Quis? Augue? Ultrices sit porttitor pulvinar a rhoncus, etiam, mauris phasellus lorem augue ac. Facilisis pulvinar integer urna, egestas magna, odio, nisi, vut odio magna integer.</p>

</body>
</html>

    Demo at JSBin.

    • 0