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 e above the other text and cover the contents in paragraph but it should not affect the alignment of other text.
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 e above the other text and cover the contents in paragraph but it should not affect the alignment of other text.
Share Improve this question asked Sep 6, 2010 at 12:21 Akhil K NambiarAkhil K Nambiar 3,97514 gold badges49 silver badges87 bronze badges 1- well i dint try much.... i was thinking to use hover to increase size but that could affect the size. So i posted it here – Akhil K Nambiar Commented Sep 7, 2010 at 4:50
4 Answers
Reset to default 4Like 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/39YKG/
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.
If you don't object to a pure CSS solution, with its somewhat imperfect cross-browser patibility you can use :hover:after and content: attr(title); to achieve this:
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis./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./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.
$('span#yourId').mouseover(function(){
$(this).css('font-size', '30px');
});
Assuming 30px is the max size you want.