CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Akhil K Nambiar
Akhil K Nambiar

Reputation: 3975

increase size of text on mouse hover css/jquery/html

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.

Upvotes: 2

Views: 6306

Answers (4)

David Thomas
David Thomas

Reputation: 253485

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.

Upvotes: 1

rsilva4
rsilva4

Reputation: 1955

Like this:

var clone;
$("span").hover(function() {
    clone = $(this).clone()
    $(this).after(clone);
    $(this).css( {
        'font-size' : '2em',
        'background-color' : '#fff',
        'position' : 'absolute'
    })
}, function() {
    clone.remove();
    $(this).css( {
        'font-size' : '1em',
        'position' : 'inherit'
    })
});

Check the running example at http://jsfiddle.net/39YKG/

Upvotes: 4

Tudor
Tudor

Reputation: 4174

$('span#yourId').mouseover(function(){
  $(this).css('font-size', '30px');
});

Assuming 30px is the max size you want.

Upvotes: -1

Luca Matteis
Luca Matteis

Reputation: 29267

As soon as the mouseover for that word is fired create a new element in the DOM (without effecting the current word element) and have it absolutely position on the page exactly where the word element is (thanks to jQuery's .position()).

With some padding you can make it align perfectly to the word.

Don't forget to remove it on mouseout.

Upvotes: 2

Related Questions