增加鼠标悬停时的文本大小css / jquery / html
[英]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. 其中有一个跨度标签，其中包含特定单词的ID。 On mouse hover the size of that particular word in para should increase. 在鼠标悬停时，para中该特定单词的大小应增加。 It can come above the other text and cover the contents in paragraph but it should not affect the alignment of other text. 它可以位于其他文本的上方，并覆盖段落中的内容，但不应影响其他文本的对齐方式。
4 个解决方案
解决方案1
4 2010-09-06 12:37:16
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/ 在http://jsfiddle.net/39YKG/中查看正在运行的示例
解决方案2
2 2010-09-06 12:26:57
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() ). 一旦触发该单词的鼠标悬停，就在DOM中创建一个新元素（不影响当前的word元素），并将其在页面上的绝对位置准确地定位到word元素的确切位置（这要归功于jQuery的.position() ）。
With some padding you can make it align perfectly to the word. 通过一些填充，您可以使其与单词完全对齐。
Don't forget to remove it on mouseout. 不要忘记在将其移出鼠标时将其删除。
解决方案3
1 已采纳 2010-09-06 13:55:20
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); 如果您不反对纯CSS解决方案，因为它与跨浏览器的兼容性有些欠完善，可以使用:hover:after和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>
解决方案4
-1 2010-09-06 12:29:27
$('span#yourId').mouseover(function(){
$(this).css('font-size', '30px');
});
Assuming 30px is the max size you want. 假设30px是您想要的最大尺寸。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.