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.
+2
A:
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.
Luca Matteis
2010-09-06 12:26:57
I should go for creating a ghost-element that shows and hide on hovering instead of creating a new one, every time a hover occurs. But that is some fine-tuning I guess.
Caspar Kleijne
2010-09-06 12:41:43
A:
$('span#yourId').mouseover(function(){
$(this).css('font-size', '30px');
});
Assuming 30px is the max size you want.
Tudorizer
2010-09-06 12:29:27
+3
A:
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/
rsilva
2010-09-06 12:37:16
+1
A:
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.
David Thomas
2010-09-06 13:55:20