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 th开发者_高级运维at 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.
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/
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 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.
$('span#yourId').mouseover(function(){
$(this).css('font-size', '30px');
});
Assuming 30px is the max size you want.
加载中,请稍侯......
精彩评论