Question

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

Answer 1

像这样：

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/

上的正在运行的示例

Answer 2

只要触发该单词的鼠标悬停，就会在DOM中创建一个新元素（不影响当前的单词元素），并使其在页面上的位置与单词元素完全一致（感谢jQuery的{{1} }）。

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

不要忘记在mouseout上删除它。

Answer 3

如果您不反对纯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的演示。

Answer 4

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

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

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

4 个答案: