增加鼠标悬停文本的大小css/jquery/html

我有一个大段落。其中有一个带有特定单词id的span标签。在鼠标悬停时，该段中特定单词的大小应该增加。它可以高于其他文本并覆盖段落中的内容，但不应该影响其他文本的对齐。增加鼠标悬停文本的大小css/jquery/html

2010-09-06 Akhil K Nambiar

以及我力量尝试多....我想使用悬停来增加大小，但这可能会影响大小。所以我把它贴在这里 – 2010-09-07 04:50:38

运行例如，如果你不反对一个纯CSS的解决方案，以其有些不完善的跨浏览器兼容，你可以使用:hover:after和content: attr(title);实现此目的：

<!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>

演示在JSBin。

来源

2010-09-06 13:55:20

只要触发该单词的鼠标悬停，在DOM中创建一个新元素（不影响当前的单词元素），并将其绝对定位在页面上的单词元素所在的位置（感谢jQuery的.position()）。

使用一些填充可以使它与单词完全对齐。

不要忘记在鼠标移除时将其删除。

来源

2010-09-06 12:26:57

我应该去创造一个幽灵元素，在悬停时显示和隐藏，而不是创建一个新元素，每次发生悬停时。但这是我猜想的一些微调。 – 2010-09-06 12:41:43

-1

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

假设30px是您想要的最大尺寸。

来源

2010-09-06 12:29:27 Tudorizer

-1，'不应该影响其他文字的对齐方式' – 2010-09-06 12:31:00

我的跳枪不好。 – Tudorizer 2010-09-06 13:16:24

像这样：

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' 
    }) 
});

检查在http://jsfiddle.net/39YKG/

来源

2010-09-06 12:37:16 rsilva4

+1 jsfiddle.net规则:) – Tudorizer 2010-09-06 13:15:10

增加鼠标悬停文本的大小css/jquery/html

回答

相关问题