增加鼠標懸停文本的大小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

回答

相關問題