如何在 HTML 文本输入字段周围放置类似 Twitter 的淡入发光？

Posted 2023-04-18

【中文标题】如何在 HTML 文本输入字段周围放置类似 Twitter 的淡入发光？

【英文标题】：How can I put a Twitter-like fade-in glow around an HTML text input field?

【发布时间】：2011-04-08 13:06:09

【问题描述】：

我知道输入字段周围的发光是标准的，但 Twitter 设法顺利淡入。我一直在环顾四周，但似乎找不到实现这一目标的可靠方法。这是怎么做到的？

【问题讨论】：

你的意思是他们主页上的新搜索框吗？

您已经尝试过的解决方案有什么问题？

【参考方案1】：

以下是推特的做法：

html：

  <p class="search-holder" style="opacity: 0.6;">
    <label for="searchform_q">Search for a keyword or phrase…</label>
    <input type="text" tabindex="8" size="30" name="q" id="searchform_q" class="round-left" accesskey="/"><input type="submit" value="Search" tabindex="9" name="commit" id="searchform_submit" class="submit round-right">
  </p>

jQuery:

  $('.search-holder').mouseenter(function()
        $(this).animate(opacity:1);
  ).mouseleave(function()
        $(this).animate(opacity:0.6);
  );

【讨论】：

嘿，我想投票，但您应该将 mouseover 和 mouseout 切换为 mouseenter 和 mouseleave，因为后代会一遍又一遍地触发 mouseover/mouseout，从而产生频闪效果。

这实际上是他们在您的帐户设置中使用的文本框，例如，文本框周围的发光淡入淡出，但文本框本身的不透明度始终为 1。这确实是他们在搜索文本框上所做的在家里，谢谢！