увеличить размер текста при наведении курсора мыши css/jquery/html

У меня есть большой абзац. Внутри этого есть тег span с id для определенного слова. При наведении мыши размер этого конкретного слова в парах должен увеличиваться. Он может быть выше другого текста и охватывать содержание в параграфе, но это не должно влиять на выравнивание другого текста.увеличить размер текста при наведении курсора мыши css/jquery/html

источник

2010-09-06 Akhil K Nambiar

хорошо, я стараюсь много .... я думал использовать зависание, чтобы увеличить размер, но это может повлиять на размер. Итак, я разместил его здесь –

Если вы не возражаете против чистого раствора 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's .position()).

С помощью некоторых дополнений вы можете сделать его идеально подходящим для слова.

Не забудьте снять его с мыши.

источник

2010-09-06 12:26:57

Мне нужно создать элемент-призрак, который показывает и скрывается при наведении, вместо создания нового, каждый раз при наведении. Думаю, это какая-то тонкая настройка. –

-1

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

Предполагая, что 30px - это максимальный размер, который вы хотите.

источник

2010-09-06 12:29:27 Tudorizer

-1, 'он не должен влиять на выравнивание другого текста' –

Неплохо для прыжка пистолета. – Tudorizer

Как это:

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

увеличить размер текста при наведении курсора мыши css/jquery/html

ответ

Смежные вопросы